CSS：将鼠标悬停在div内的元素上，更改另一个div内的元素样式

我有两个div。我想在div中将元素悬停在另一个div内时更改样式。CSS：将鼠标悬停在div内的元素上，更改另一个div内的元素样式

在接下来的例子我想告诉more当鼠标悬停在h3

有可能只用CSS？

见例如：

.alpha { 
 
position:relative; 
 
background-color:red; 
 
width:100px; 
 
height:50px; 
 
} 
 

 
.alpha .more { 
 
position:absolute; 
 
top:40%; 
 
left:40%; 
 
display:none 
 
} 
 

 
.beta {} 
 

 
.beta h3:hover + .alpha .more { 
 
display:block; 
 
}

<div class="alpha"> 
 
<span class="more">Hello</span> 
 
</div> 
 

 
<div class="beta"> 
 
<h3>Make hover</h3> 
 
</div>

来源

2017-03-16 kurtko

见http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered 。 – Shiva127

是的，我知道，但元素是在不同的divs – kurtko

[不幸的是，不可能]（http://stackoverflow.com/a/42655293/3162554） – Marvin

你只能去到紧接着的下一兄弟（与+）或任何一个同级（含~）。无法上传HTML树（到父级）。因此，如果您在HTML DOM中切换其位置（.beta在.alpha之前），则可以从.beta上的悬停位置移至.alpha的子项。所以，看到这个例子：

.alpha { 
 
    position:relative; 
 
    background-color:red; 
 
    width:100px; 
 
    height:50px; 
 
} 
 

 
.alpha .more { 
 
    position:absolute; 
 
    top:40%; 
 
    left:40%; 
 
    display:none 
 
} 
 

 
.beta {} 
 

 
.beta:hover + .alpha .more { 
 
    display:block; 
 
}

<div class="beta"> 
 
    <h3>Make hover</h3> 
 
</div> 
 

 
<div class="alpha"> 
 
    <span class="more">Hello</span> 
 
</div>

来源

2017-03-16 13:46:21

CSS：将鼠标悬停在div内的元素上，更改另一个div内的元素样式

回答

相关问题