CSS：在懸停上更改多個標籤

我想在HTML中的鼠標懸停在CSS中的一個元素上，更改多個標籤（身體的背景顏色，.text類的文本顏色和.url的url鏈接出現）。CSS：在懸停上更改多個標籤

下面的代碼不起作用（URL標籤出現，但背景顏色和.text顏色不會改變）。

body { 
 
    background-color: #f1f1f1; 
 
} 
 

 
div { 
 
    height: 200px; 
 
    width: 400px; 
 
    text-align: center; 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -100px; 
 
    margin-left: -200px; 
 
} 
 

 
.text { 
 
    color: blue; 
 
} 
 

 
.url { 
 
    z-index: 100; 
 
    position: absolute; 
 
    color: black; 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
    left: 150px; 
 
    top: 100px; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
} 
 

 
.img { 
 
    position: relative; 
 
    display: block; 
 
    top: 50%; 
 
    left: 50%; 
 
} 
 

 
.img:hover > body { 
 
    background-color: black; 
 
} 
 

 
.img:hover > .url { 
 
    visibility: visible; 
 
    opacity: 1; 
 
} 
 

 
.img:hover > .text { 
 
    color: white; 
 
}

<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" href="index.css"> 
 
</head> 
 
<body> 
 

 
    <div> 
 
    <h1 class="text"> Neon Cabbage </h1> 
 
    <h2 class="text"> 2nd Website </h2> 
 
    <div class="img"> 
 
     <a href="main.html"><img src="images/cabbage.jpg" id="cabbage" width="200" height="200" onmouseover="this.src='images/cabbage2.jpg';" onmouseout="this.src='images/cabbage.jpg';"></a> 
 
     <a href="main.html" class="url">click!</a> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

來源

2016-11-14 Kayla Jin

不幸的是，你有什麼CSS可以實現小姐的理解，你以後有什麼需要Javascript的援助。

我在你的代碼中看到你有類似的東西;

.img:hover > body { 
    background-color: black; 
}

img標籤是在DOM體內，並簡單地說CSS可以在裏面一隻是彼此影響的子元素，爲此它是不可能爲它改變身體的背景。例如給出以下html結構...

<div class='parent'> 
    Parent 
    <div class='child'>Child</div> 
</div>

.parent:hover .child { color: red; }將改變孩子的顏色。

.child { }在CSS中無法執行任何操作來實現.parent類樣式。這是因爲瀏覽器如何遍歷DOM並應用類。

來源

2016-11-14 01:34:52 shaune

CSS：在懸停上更改多個標籤

回答

相關問題