时间戳

首页 > 解决方案 > 如何防止子元素继承主容器的悬停元素

html - 如何防止子元素继承主容器的悬停元素

问题描述

我正在尝试在包含产品的图像 div、sku div 和价格 div 的 div 元素上添加一些比萨。当我在主容器上添加悬停效果时，子 div 也会继承它，并对每个子 div 具有单独的悬停效果。

每个主容器的 HTML

<div class="maincontainer">
    <div class="imgbox" >
        <img src="G-Shock.png" alt="gshock">
    </div>
    <div class="skubox">
        <p>
            G-Shock Watch
        </p>
    </div>
    <div class="pricebox">
        <p>
            $500.00
        </p>
    </div>
</div>

主容器及其子容器的 CSS

.maincontainer{
   width:350px; 
   position: relative;
   padding:2%;
   flex-grow:1;
   flex-basis:16%;

}
.imgbox{
    height:218px;
    width:218px;
    margin:0 auto;

}
.skubox{
    height:72px;
    width:160px;
    margin:0 auto;
    text-align:center;
    position:relative;
    padding-top:1px;
}
.pricebox{
    height:22px;
    width:80px;
    margin:0 auto;
    text-align:center;
    position:relative;
    padding-top:1px; 
}
p{
    margin:0;
    padding:0;
    text-align:center;
    position:relative;
    top:50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
    font-size:13px;
}
.maincontainer :hover{
    box-shadow: 0 0 11px;
}

标签： htmlcss

解决方案

.maincontainer发生这种情况是因为您在类选择器和伪选择器之间有一个空格:hover，这意味着“maincontainer 的悬停样式的任何子项”。删除该空间并解决问题。看到这个：

.maincontainer {
  width: 350px;
  position: relative;
  padding: 2%;
  flex-grow: 1;
  flex-basis: 16%;
}

.imgbox {
  height: 218px;
  width: 218px;
  margin: 0 auto;
}

.skubox {
  height: 72px;
  width: 160px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  padding-top: 1px;
}

.pricebox {
  height: 22px;
  width: 80px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  padding-top: 1px;
}

p {
  margin: 0;
  padding: 0;
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 13px;
}

.maincontainer:hover {
  box-shadow: 0 0 11px;
}
<div class="maincontainer">
  <div class="imgbox">
    <img src="G-Shock.png" alt="gshock">
  </div>
  <div class="skubox">
    <p>
      G-Shock Watch
    </p>
  </div>
  <div class="pricebox">
    <p>
      $500.00
    </p>
  </div>
</div>

推荐阅读