css - 我可以 "transform"悬停时带有 CSS 的同级吗？

Question

我想知道当我将鼠标悬停在同级对象 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"> &nbsp;</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 (缩放)应用变换，我想这绝对是可能的，但是，我无法做到这一点。谁能帮助我或至少告诉我是否可能？谢谢。

Answer 1

您可以按照注释中提到的方式执行此操作.caption-text:hover + .imgZoom {} 但你必须将 img 向右移动到你想要悬停的元素

<div id="block-1">
    <a href="whatever.hml">
        <div style="height: 86px;" class="caption"> &nbsp;</div>
        <div class="caption-text">
            <h3>Header</h3>
            <h4>subheader</h4>
        </div>
        <img class="imgZoom" src="image.jpg" height="300">
    </a>
</div>

如果您需要按照您所说的顺序排列元素，则需要使用 javascript