Kayla Jin Kayla Jin - 18 days ago 7
CSS Question

CSS: change multiple tags on hover

I want to change multiple tags (body's background color,

.text
class's text color, and url link for
.url
to appear) in my html on mouse hover on one element in CSS.

The below code is not working (the url tag appears, but background color and
.text
color does not change).



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>




Answer

Unfortunately you have a miss understanding of what CSS can achieve, what you are after requires the assistance of Javascript.

I see in your code that you have things like;

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

The img tag is inside the body in the DOM, and Put simply CSS can only effect child elements inside one-another, therefor it is not possible for it to change the background of the body. for example given the following html structure...

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

.parent:hover .child { color: red; } will change the color of the child.

.child { } cannot do anything in CSS to effect the .parent class style. This is because of how the browser traverses the DOM and applies classes.

Comments