Question

<div class="hdr-me">Me
  <span class="mearrow"></span>
</div>

CSS

.hdr-me {
    width: 33px;height: 28px;float: left;
    -webkit-transition: all 0.2s cubic-bezier(0.2, 0.47, 0.435, 0.97);
    -moz-transition: all 0.2s cubic-bezier(0.2, 0.47, 0.435, 0.97);
    -o-transition: all 0.2s cubic-bezier(0.2, 0.47, 0.435, 0.97);
    -ms-transition: all 0.2s cubic-bezier(0.2, 0.47, 0.435, 0.97);
    transition-transition:all 0.2s cubic-bezier(0.2, 0.47, 0.435, 0.97);
    margin:9px 5px 5px 5px !important;
    padding:12px 0px 0px 7px;
    background:$blueDark;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    color:$white;
    cursor:pointer;
}
.hdr-nav-rt .hdr-me .mearrow{
float: left;
margin-left: 21px;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 3px solid $white;
margin-top: -6px;
}
.hdr-nav-rt .hdr-me:hover {
    width: 33px;height: 28px;float: left;
    margin:9px 5px 5px 5px !important;
    padding:12px 0px 0px 7px;
    background:$grayDark;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    color:$white;
    cursor:pointer;

}

我还需要在悬停时更改mearrow 喜欢

 .hdr-nav-rt .hdr-me:hover .mearrow{
   float:left;
   margin-left:21px;
   border-left:3px solid transparent;
   border-right:3px solid transparent;
   **border-bottom:3px** solid #fff;
   margin-top:-6px;
    }

是否可以仅使用css

修改

两种mearrow样式也会显示，两种形状都在悬停后显示

Answer 1

：悬停通常最适合锚点。我建议把一个锚放在.hdr-me里并相应地更改css。所以基本上你有：

<div class="hdr-me">Me
  <a>
    <span class="mearrow"></span>
  </a>
</div>

然后你的CSS变成：

.hdr-nav-rt .hdr-me a:hover .mearrow

'。mearrow'也会以这种方式触发悬停事件。

Answer 2

您可以单独将样式应用于子块。内部Div将采用自己的风格，不会被父div的风格所覆盖。

找到jsfiddle here。

/ *父div的样式* / .hdr-me {

}
 /* Style for Parent div on Mouse hover*/ 
.hdr-me:hover {

}

/* Style for child div */    
.hdr-me .mearrow{

}
/* Style for child div after on mouse hover*/    
.mearrow:hover {

}

在悬停时使用css更改基本元素？

2 个答案: