Question

我有2列布局，左列是文本，右列是图像。我想要实现的是当用户将鼠标悬停在左列上时，具有背景图像的右列将缩放，当然当用户将鼠标悬停在右列上时，图像也会缩放。

问题是，当用户将鼠标悬停在左列上时，我希望右列图像也可以缩放

两列都有相同的链接。我为这个链接做了一个小提琴： https://jsfiddle.net/jqztf3nv/

任何帮助都将不胜感激。

由于

代码

 <div id="article-row">
    <a title="more" href="http://google.com" target="_blank">
        <div class="left-col">
            <h1>
            Lorem ipsum dolor sit amet
            </h1>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.Etiam quis mollis ante. Ut sapien est, gravida in turpis vitae, accumsan egestas nunc. Etiam porttitor, felis ac lobortis faucibus
           </p>
       </div>
    <div class="article-top zoomimg"></div></a>
</div>


#article-row {
width: 100%;
margin: auto;
}
.left-col {
width: 50%;
float: left;
height: 300px;
}
.zoomimg {
display: inline-block;
width: 100%;
height: 300px;

background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
transition: all .5s ease;
position: relative;
}
.zoomimg:hover {
cursor: pointer;
background-size: 150% 150%;
}
.article-top {
background-image: url(https://static.pexels.com/photos/128442/pexels-photo-128442.jpeg);
float: right;
width: 50%;
height: 300px;
}

.zoomimg:after {
position: absolute;
background-color: rgba(0,0,0,.35);
content: attr(title);
font-family: sans-serif;
padding-top: 250px;
font-size: 2em;
color: #fff;
top:  0;
left: 0;
width: 100%;
height: 300px;
opacity: 0;
transition: opacity .5s linear;
box-sizing: border-box;
}
.zoomimg:hover:after {
opacity: 1;
}

Answer 1

只需更改您需要做的就是替换此css规则：

.zoomimg:hover {   
    cursor: pointer;
    background-size: 150% 150%;
}

使用：

#article-row:hover .zoomimg {
    cursor: pointer;
    background-size: 150% 150%;
}

查看更新后的小提琴https://jsfiddle.net/jqztf3nv/1/

在悬停的2列布局上缩放图像

1 个答案: