第一个div
第二个div
原来是这样
<div class="div1">
1st image goes here
<div class="div2">
the background-color goes here
and the logo with the href
</div>
</div>
我想做的是在鼠标悬停时缩放第一个图像并更改背景的淡入淡出/不透明度,这样就不会影响 Logo 并使其停留在顶部。
我可以只用 css 实现这个还是必须实现 jQuery?
这是我的
.div1{
position: relative;
transform:scale(1);
transition:all 1s;
object-fit: cover;
display:block;
img{
object-fit: cover;
}
:hover img {
transform:scale(1.05);
}
}
}
.div2{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background-color:red;
opacity:1;
transition: opacity .35s,transform .35s;
:hover{
opacity:.5;
}
}
.div2 img{
width: 150px !important;
display : block;
margin : auto;
position: relative;
height: auto;
z-index: 40;
}
当我将鼠标悬停时, Logo 会缩小并且 div2 不透明度不会降低。
最佳答案
两种方式都可以。
如果您使用 jQuery,请使用 onmouseover
和 mouseout
。您不想局限于这些功能。有很多方法可以使用 jQuery 实现这一点。
否则您可以使用 CSS 来实现此目的。
关于jquery - 在多个 div 中定位一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40448923/