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（scale），我想这绝对可能，但是，我无法做到。任何人都可以帮助我，或者至少告诉我是否可能？感谢。

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

我可以在悬停时用CSS“转换”兄弟姐妹吗？

1 个答案: