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

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 将鼠标悬停在元素上时为其添加样式。只需在您的代码中添加另一个选择器即可 say

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

然后为您的每张图片重复该操作。理想情况下，因为它们都共享大部分相同的样式，所以给它们一个公共(public)类(每个元素可以有多个类(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。