.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

可能是因为你的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);
}

相关问题

.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;"是设置该元素的过渡效果与父元素相同。这个样式通常用于在网页中显示图片时，将图片的溢出部分隐藏，同时将圆角效果与父元素相同。

.image-wrapper .wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; transition: inherit; }作用

这段CSS样式代码的作用是设置类名为image-wrapper的元素内的类名为wrapper的元素的样式，使其定位方式为绝对定位，同时将其放置在父元素的左上角上，宽度和高度都为100%。overflow属性设置为hidden，将超出该元素范围的内容隐藏起来，border-radius属性设置为inherit，表示使用父元素的边框圆角半径，transition属性设置为inherit，表示与父元素的过渡效果相同。

这个样式通常用于实现图片显示时的效果。通过将图片的父元素设置为相对定位，然后将图片的包裹元素设置为绝对定位，可以实现将图片放置在父元素的左上角上，同时隐藏图片溢出的部分。通过继承父元素的边框圆角半径和过渡效果，可以使图片的显示效果更加统一和美观。