dream hunter dream hunter - 3 months ago 9
CSS Question

i want to display apple in green colour instead of mango in red colour when mouse over the mango

strong textthis is my html code

<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>


this is my style sheet

#two
{
display:none;
}
#one
{
background-color :red;
}


i want to display apple in green colour(bg colour) instead of mango in red colour(bg colour) when mouse over the mango ,i'm tried the following codes ,but that's not help me..

#one :hover + #two
{
display:block;
}
#one :hover ~ #two
{
display: inline-block;
background-color: greenyellow;
}

Answer

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's the snippet:

#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>