悬停在导航栏上的动态图像

Question

我需要创建如上图所示的css菜单。当鼠标悬停在菜单上时，必须更改图像和背景。

继承我的菜单代码

HTML

<ul>
    <li class="active1"> <a href="profile.html" class="act">My Profile</a></li>
    <li><a href="sponsor.html" class="profile1">My Sponsor</a></li>
    <li><a href="bankdetails.html" class="profile2">My Payment Information </a></li>
    <li><a href="mydocuments.html" class="profile3">My Documents (KYC) </a></li>
</ul>

CSS

tabs ul li a {
    color:#5d5c5c;
    list-style:none;
    text-decoration:none;
    font-size:15px;
    line-height:25px;
}
.tabs ul li {
    list-style:none;
    webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border:1px solid #c3c3c3;
    float:left;
    background:#e2e3e4;
    padding:4px 16px;
}
.active1 {
    background:url('../images/profile.jpg') no-repeat left center #004b85 !important;
    color:#fff !important;
    padding-left:35px !important;
    height:40px;
    border:none!important;
}
.act {
    color:#fff!important;
}
.profile1 {
    background: url('../images/profile.png') no-repeat -2px 0;
    width: 23px;
    height: 15px;
    padding-left:25px;
}
.profile2 {
    background: url('../images/profile.png') no-repeat -4px -29px;
    width: 23px;
    height: 18px;
    padding-left:25px;
}
.profile3 {
    background: url('../images/profile.png') no-repeat -6px -61px;
    width: 20px;
    height: 20px;
    padding-left:25px;
}

主要问题是css不是那么动态。我可以使用jquery或css3来帮助使用css nth-child items或jquery使其更具动态性????

Answer 1

使用伪类:hover在元素悬停时向其添加样式。只需在代码中添加另一个选择器即可

.profile1:hover {
  background: url('../images/profile_hover.png') no-repeat -2px 0;
  background-color: #FF33CC;
}

对每张图片重复一遍。理想情况下，因为它们都共享大多数相同的样式，所以给它们一个公共类（每个元素可以有多个类（class="profile1 common-nav-class"））并在那个中定义

.common-nav-class {
  width: 20px;
  height:20px;
  padding-left:25px;
}
.common-nav-class:hover{
  background-color: #FF33CC;
}

然后只定义各个类选择器中的唯一属性。

如果您想使其更加精美并为背景颜色设置动画，请添加transition: 0.2s linear background-color。

Answer 2

您不需要将活动类分开，您可以只使用：hover伪类

收率

.profile2{color:#000000;} /* standard css*/
.profile2:hover{color:FFFF00} /* this css will aply when you over a mouse on profile2 */

因此您可以将css更改为：

.profile1:hover {
  background: url('../images/profile_hover.png') no-repeat -2px 0;
  background-color: #FF33CC;
}