Codes 4 U: Override Two Independent div Tags Using Simple Threat using css...(only one possible methode using css)

Friday, 12 August 2016

Override Two Independent div Tags Using Simple Threat using css...(only one possible methode using css)

Here's a CSS only solution. The trick is to overlay the second element on top of the first and then hide it. On hover, show the second div. NOTE: I didn't use visibility because one can't hover over invisible elements.

                                                                                                                                                    here what we done is that display apple in green colour(bg colour) instead of mango in red colour(bg colour) when

mouse over the mango

#one {
  display:block;
  background-color: red;
}

#two {
  opacity: 0;
  background-color: green;
  position: relative;
  top: -34px;
}

#two:hover {
    opacity: 1;
  }
}

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="hov.css">
    </head>
    <body>
        <div id="one">
            <p>mango</p>
        </div>
        <div id="two">
            <p>apple</p>
        </div>
    </body>
</html>