.banner{ width: inherit; height: auto; } .banner_list{ width: inherit; height: 400px; overflow: hidden; position: relative; } .banner_list_item{ width: 300px; height: inherit; position: absolute; float: left; background-size: 300px 400px; background-repeat: no-repeat; transition-duration: 1s; } #banner_list_item1{ background-image: url("../img/watch/banner1.webp"); left: 0px; } #banner_list_item1:hover{ left: 300px; } #banner_list_item2{ background-image: url("../img/watch/banner2.webp"); left: -100px; } #banner_list_item2:hover{ left: 300px; } #banner_list_item3{ background-image: url("../img/watch/banner3.webp"); left: -200px; } #banner_list_item3:hover{ left: 300px; }这样的设置为什么不能是鼠标移上去时,hover不能被触发,但是通过浏览器可以强制触发hover
时间: 2023-07-15 17:10:07 浏览: 54
可能是因为你的CSS代码中使用了绝对定位(position:absolute),而鼠标移上去时没有与其交互的元素。可以尝试将绝对定位改为相对定位(position:relative)并使用transform属性来实现动画效果,这样鼠标移上去时就可以触发hover了。例如:
.banner_list_item{
width: 300px;
height: inherit;
position: relative;
float: left;
background-size: 300px 400px;
background-repeat: no-repeat;
transition-duration: 1s;
transform: translateX(0);
}
.banner_list_item:hover{
transform: translateX(300px);
}
相关问题
VISIBILITY: inherit; WIDTH: 100%; HEIGHT: 92%
这是CSS样式表中的一条规则,用于设置元素的可见性和尺寸。其中"inherit"表示继承父元素的可见性属性,"WIDTH: 100%;" 表示元素宽度占据父元素的100%,"HEIGHT: 92%;" 表示元素高度占据父元素的92%。具体来说,这条规则可以让一个元素占据父元素的大部分空间,但仍然保留一定可见性。
.image-wrapper .wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; transition: inherit; }
这段代码是什么意思?
这段代码是用于设置CSS的样式,其中".image-wrapper .wrapper"表示选择类名为image-wrapper的元素内的类名为wrapper的元素,而"position: absolute; top: 0; left: 0;"是设置该元素的定位方式为绝对定位,并将其放置在父元素的左上角,"width: 100%; height: 100%;"是设置该元素的宽度和高度都为100%,"overflow: hidden;"是设置该元素的溢出内容隐藏,"border-radius: inherit;"是设置该元素的圆角半径与父元素相同,"transition: inherit;"是设置该元素的过渡效果与父元素相同。这个样式通常用于在网页中显示图片时,将图片的溢出部分隐藏,同时将圆角效果与父元素相同。