How to display other div when mouse is above diffrent div?-CodePudding

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  style="width: 200px; height: 200px; "></div>
    <div  style="width: 100px; height: 100px;"></div>
</body>

CodePudding user response：

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  style="width: 200px; height: 200px; ">A</div>
    <div  style="width: 100px; height: 100px;">B</div>
</body>

CodePudding user response：

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

.b{
    background-color: royalblue;
    display:none;
 }
 .a:hover   .b {
    display: block;
 }

<body>
  
  <div  style="width: 200px; height: 200px; "></div>
  <div  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(~)