Question

我想同时将悬停效果应用于两个单独的元素。这意味着当您将鼠标悬停在一个元素上时，悬停效果也会应用于另一个元素。这两个元素是一个简单的文本和一个图像。难道没有办法只用 html 和 css 来做到这一点吗？还是我必须使用 javascript？

非常感谢！

html

<div class="project">
<div class="img_overflow">
 <div class="img_scale">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg">
</div>
</div>
<h1 class="underline">Text Underline</h1>
</div>

css

.project h1 {font-size: 26px;background-image: linear-gradient(transparent 60%, #F8CD07 40%);background-repeat: no-repeat;background-size: 10% 100%;transition: background-size 0.8s;color: #000;cursor: pointer;}
.img_overflow {width:200px; height: 200px; overflow:hidden;}
.project img {width:100%;height:auto;}
.img_scale {transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transition: all 0.6s ease-out;}
.project:hover > .img_scale{transform: scale(1.1);-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);}
.project:hover > .underline{background-size: 100% 100%;}

enter link description here https://jsfiddle.net/jwpg018241/etobr4pg/57/

Answer 1

删除 > 然后所有的工作如下：

.project h1 {
  font-size: 26px;
  background-image: linear-gradient(transparent 60%, #F8CD07 40%);
  background-repeat: no-repeat;
  background-size: 10% 100%;
  transition: background-size 0.8s;
  color: #000;
  cursor: pointer;
}

.img_overflow {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

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

.img_scale {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transition: all 0.6s ease-out;
}

.project:hover .img_scale {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.project:hover .underline {
  background-size: 100% 100%;
}

<div class="project">
  <div class="img_overflow">
    <div class="img_scale">
      <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg">
    </div>
  </div>
  <h1 class="underline">Text Underline</h1>
</div>

如何将悬停效果应用于 2 个不同的元素

1 个答案: