CODEWITHSUNDEEP
htmlcss
Kayla Jin
Kayla Jin

Reputation: 67

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>

Upvotes: 0

Views: 1407

Answers (1)

shaune
shaune

Reputation: 1030

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.

Upvotes: 1

Related Questions