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

スタイルをサブブロックに個別に適用できます。内側の 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 に答える
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 に答える