0 
<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样式也显示，两种形状都在悬停后显示

4

2 回答 2

0

:hover 通常在锚点上效果最好。我建议在 .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' 也会以这种方式触发悬停事件。

于 2012-12-05T06:51:36.430 回答
0

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

在这里找到 jsfiddle 。

/* 父 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 {

}
于 2012-12-05T07:07:53.167 回答