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內的元素樣式

回答

相關問題