访问元素背景属性

Question

我这里有一些代码

.gallery {
  margin: 5px;
  border: 4px solid rgb(249, 255, 249);
  float: left;
  width: 320px;
}

.gallery:hover {
  border: 4px solid rgb(190, 231, 255);
}

.gallery img {
  width: 100%;
  height: auto;
}

.description {
  padding: 15px;
  text-align: center;
}

<div class="gallery">
  <a target="_blank" href="#">
    <img src="https://upload.wikimedia.org/wikipedia/commons/5/56/TiddlyMap_Demo_Site_-_0.6.4_-_Snapshot_2.png" alt="testImage" width="600" height="400" />
  </a>
  <div class="description">Description for the image</div>
</div>

我想在.gallery：hover触发

时更改.description的背景

Answer 1

您只需要添加此样式：

.gallery:hover .description {
  background-color:red;
}

＆＃13;

＆＃13;

.gallery {
  margin: 5px;
  border: 4px solid rgb(249, 255, 249);
  float: left;
  width: 320px;
}

.gallery:hover {
  border: 4px solid rgb(190, 231, 255);
}

.gallery:hover .description {
  background-color:red;
}

.gallery img {
  width: 100%;
  height: auto;
}

.description {
  padding: 15px;
  text-align: center;
}

＆＃13;

<div class="gallery">
  <a target="_blank" href="#">
    <img src="https://upload.wikimedia.org/wikipedia/commons/5/56/TiddlyMap_Demo_Site_-_0.6.4_-_Snapshot_2.png" alt="testImage" width="600" height="400" />
  </a>
  <div class="description">Description for the image</div>
</div>

＆＃13;

＆＃13;

＆＃13;