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

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 项或 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;
}