我想知道当我将一个同级对象B悬停时是否可以转换对象A(如果可能,仅使用CSS)。这是我的代码:
<div id="block-1">
<a href="whatever.hml">
<img class="imgZoom" src="image.jpg" height="300">
<div style="height: 86px;" class="caption"> </div>
<div class="caption-text">
<h3>Header</h3>
<h4>subheader</h4>
</div>
</a>
</div>
.imgZoom就是这样:
.imgZoom {
-webkit-transition: all 0.4s ease; /* Safari and Chrome */
-moz-transition: all 0.4s ease; /* Firefox */
-ms-transition: all 0.4s ease; /* IE 9 */
-o-transition: all 0.4s ease; /* Opera */
transition: all 0.4s ease;
}
我想将.caption-text悬停并对imgZoom(缩放)应用转换,我想这是绝对可能的,但是好吧,我做不到。谁能帮助我,或者至少告诉我是否可能?谢谢。
最佳答案
您可以按照评论.caption-text:hover + .imgZoom {}
中的说明进行操作
但您必须将img移到要悬停的右边元素
<div id="block-1">
<a href="whatever.hml">
<div style="height: 86px;" class="caption"> </div>
<div class="caption-text">
<h3>Header</h3>
<h4>subheader</h4>
</div>
<img class="imgZoom" src="image.jpg" height="300">
</a>
</div>
如果您需要按顺序排列的元素,则需要使用javascript
关于css3 - 我可以在悬停时使用CSS“转换”同级物品吗?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30909212/