background: inherit;
时间: 2023-04-26 18:05:05 浏览: 70
background: inherit; 的意思是继承父元素的背景属性。如果子元素没有自己的背景属性,那么它将继承父元素的背景属性。这样可以使得子元素的背景与父元素的背景保持一致,从而达到一致的视觉效果。
相关问题
pointer-events: inherit;
`pointer-events: inherit;`是CSS中的一个属性,用于指定元素是否应该响应鼠标事件。当一个元素设置为`pointer-events: inherit;`时,它会继承其父元素的指针事件属性。如果父元素设置为`pointer-events: none;`,则子元素也不会响应鼠标事件。
以下是一个例子,其中子元素继承了父元素的`pointer-events`属性:
```html
<style>
.parent {
pointer-events: none;
}
.child {
pointer-events: inherit;
background-color: yellow;
}
</style>
<div class="parent">
<div class="child">子元素</div>
</div>
```
在这个例子中,父元素`.parent`设置了`pointer-events: none;`,因此它不会响应鼠标事件。子元素`.child`继承了父元素的`pointer-events`属性,因此它也不会响应鼠标事件。但是,子元素设置了背景颜色为黄色,因此可以看到它仍然存在于页面上。
.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);
}