background: inherit;

background: inherit; 的意思是继承父元素的背景属性。如果子元素没有自己的背景属性，那么它将继承父元素的背景属性。这样可以使得子元素的背景与父元素的背景保持一致，从而达到一致的视觉效果。

相关问题

background-image: inherit

background-image: inherit 是 CSS 的一个属性，它用于指定元素的背景图像。当一个元素设置了 background-image: inherit 属性时，它会继承父元素的背景图像。

也就是说，如果一个元素没有设置背景图像，但它的父元素设置了背景图像，那么这个元素会自动继承父元素的背景图像。

需要注意的是，inherit 属性只能继承父元素的属性值，而不能继承祖先元素的属性值。另外，如果父元素没有设置背景图像，则会继承它的父元素的背景图像，以此类推，直到找到设置了背景图像的祖先元素为止。

.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);
}