2

当用户在相应页面中时，我想将悬停设置为活动状态。例如，当用户在 HOME 中时，它会使悬停处于活动状态。默认图标为白色，在相应页面中将变为绿色。

这是我来自 jsfiddle http://jsfiddle.net/kQNHj/的原始来源

这是我的基本 html 源代码

<div class="submenu">
    <div class="submenu-img" >        
        <a href="#"><div class="icon-home"></div></a>
        <a href="#"><div class="icon-groups"></div></a>
        <a href="#"><div class="icon-members"></div></a>                 
    </div>
</div>

这是我的CSS

.submenu {
    background-color: #353535;
    overflow: hidden;
    position: relative;
}

.submenu-img {       
    float: left;
    position: relative;    
    padding: 30px 0 30px 0;
    margin-left: 35%;
}

/*--------------------------------------------------------------
    Submenu "Home" icon
--------------------------------------------------------------*/
.submenu-img .icon-home {
    background-image: url(http://imageshack.us/a/img607/9549/j3oe.png);
    background-repeat: no-repeat;
    display: block;
    position: relative;
    height: 56px;
    width: 41px;
    margin: 0 55px 0 0;
    float:left;
}

.submenu-img .icon-home:hover {
    background-image: url(http://imageshack.us/a/img202/4181/nlnf.png);    
}

.submenu-img .icon-home:active {
    background-image: url(http://imageshack.us/a/img607/9549/j3oe.png);   
}

/*--------------------------------------------------------------
    Submenu "Groups" icon
--------------------------------------------------------------*/
.submenu-img .icon-groups {
    background-image: url(http://imageshack.us/a/img191/1220/9sb7.png);
    background-repeat: no-repeat;
    display: block;
    position: relative;    
    height: 54px;
    width: 49px;
    margin: 0 55px 0 0;
    float: left;

}

.submenu-img .icon-groups:hover {
   background-image: url(http://imageshack.us/a/img818/6343/3vhv.png); 
}

.submenu-img .icon-groups:active {     
    background-image: url(http://imageshack.us/a/img191/1220/9sb7.png);
}

/*--------------------------------------------------------------
    Submenu "Members" icon
--------------------------------------------------------------*/
.submenu-img .icon-members {
    background-image: url(http://imageshack.us/a/img62/4964/6spa.png);
    background-repeat: no-repeat;
    display: block;
    position: relative;    
    height: 54px;
    width: 64px;
    margin: 0 55px 0 0;
    float: left;
}

.submenu-img .icon-members:hover {
    background-image: url(http://imageshack.us/a/img842/6206/reko.png);
}

.submenu-img .icon-members:active {
    background-image: url(http://imageshack.us/a/img62/4964/6spa.png);
}
4

3 回答 3

1

为什么不在相应页面上为图标添加“活动”类？在主页上添加“活动”到主页图标，在组页面上添加“活动”到组图标等。

我已经相应地编辑了小提琴。

于 2013-09-06T10:19:51.777 回答
0

这样做的最好方法是由 David Pucko 提出的。如果您有可能更改生成 html 的模板 - 只需active在页面加载时添加一个类到所需的图标（或者最好是链接）。为了让它看起来像悬停，你需要像这样改变你的CSS：

.submenu-img .icon-groups.active {     
    background-image: url(http://imageshack.us/a/img191/1220/9sb7.png);
}

请注意，我使用的是点，而不是冒号。使用是错误的:active。

如果您无法调整模板 - 突出显示当前图标的唯一方法是使用 jQuery。或者，如果你愿意，它可以用 vanilla JS 重写它。

$(document).ready(function(){
    var current_url = window.location.href,
        top_menu_links = $('.submenu-img').children('a');

    switch (current_url) {
        case 'http://site.com/groups' :
        top_menu_links.eq(1).addClass('active');
        break;
      case label2:
        case 'http://site.com/members' :
        top_menu_links.eq(2).addClass('active');
        break;
      default:
        case 'http://site.com/' :
        top_menu_links.eq(0).addClass('active');
        break;
    }
});

请注意eq()中使用的数字从零开始，而不是从一开始。

然后再次。为了使其正常工作，您需要为图标添加 css 样式active（请参阅上面的答案）。

注意：我不能给你一个关于 jsfiddle 或任何其他在线服务的活生生的例子，但它应该可以工作。

于 2013-09-06T14:19:33.737 回答
0 
Do it like this if u are building a single page site
HTML
<a href="#"><div class="icon-home clickable"></div></a>

JS: add a lissener to the buttons with clickable class
$(function() {
  $(".clickable").click(function() {
    $(this).addClass("active");// add this class dynamically
  });
});

CSS
.active {
    background-image: url(http://imageshack.us/a/img62/4964/6spa.png);
}
于 2013-09-06T10:36:15.763 回答