Question

我想在我的顶级菜单上将div css后台悬停效果设为白色（#fff）。

这不是菜单链接。这是背景（矩形有点透明表。全宽）。

如果你使用F12，你可以看到'div.top-strip.color-site-white'。

我的网站是http://www.samgyoyu.com/。我想像这个网站一样做悬停效果。 http://www.herschelsupply.com/

谢谢你，祝你有愉快的一天：）

Answer 1

将以下行添加到您的css

 #secondary-nav ul li:nth-child(n+2) a:hover
   {
      color: black;
      border-bottom: 2px solid black;

     }

Answer 2

将背景颜色设为透明

#masthead .color-site-white {
  background-color:rgba(255,255,255,.5);
  position:fixed;
  left: 0;
  right: 0;
}
#masthead .color-site-white:hover {
  background-color:rgba(255,255,255,1);    
}

对于IE 7,8 - 这不支持（RGBA）所以你必须使用png transprent图像作为背景和div：hover也不支持IE所以你必须使用javascript。

$("#masthead .color-site-white").hover(function(){
  $(this).css({background:'white'});
})

Answer 3

将这些行添加到div

.top-strip color-site-white {
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    transition: 0.2s;
}

.top-strip color-site-white:hover {
   background-color: #whatever...
}

如何使div css后台悬停

3 个答案: