'How to display other div when mouse is above diffrent div?

i want to display .b div when cursor is hover on .a div. Is it possible to do? I know that its possible to do when i put .b into .a div, but i would rather not to do it.

<html> 
<head> 
    <title> 
        How to 
    </title>
    <style>
        .b{
            background-color: royalblue;
    display:none;
        }
        .a:hover > b{
            display: block;
        }
.a:hover{
    background-color: pink;
}
.a{
    background-color: lawngreen;
}

    </style>
</head> 
  
<body>
    <div class="a" style="width: 200px; height: 200px; "></div>
    <div class="b" style="width: 100px; height: 100px;"></div>
</body>
htmlhover


Solution 1:[1]

You could you use the css + plus selector

Important notice: This will only work if a is next to b, if there is (for example) a c between a and c, it will not work 

<html> 
<head> 
    <title> 
        How to 
    </title>
    <style>
        .b{
            background-color: royalblue;
    display:none;
        }
        .a:hover + .b{
            display: block;
        }
.a:hover{
    background-color: pink;
}
.a{
    background-color: lawngreen;
}

    </style>
</head> 
  
<body>
    <div class="a" style="width: 200px; height: 200px; ">A</div>
    <div class="b" style="width: 100px; height: 100px;">B</div>
</body>

Solution 2:[2]

.a{
    background-color: green;
}
.a:hover{
    background-color: pink;
}

.b{
    background-color: royalblue;
    display:none;
 }
 .a:hover + .b {
    display: block;
 }
<body>
  
  <div class="a" style="width: 200px; height: 200px; "></div>
  <div class="b" style="width: 100px; height: 100px;"></div>
    
</body>

Yes, you can do it by using adjacent sibling selector (+)

Here is a demostration

Only catch here is that style will be applied to the next element.

You can also check General sibling selector(~)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 James
Solution 2

Related Questions