html - 尝试根据用户所在的页面显示导航栏图像

Question

我目前将我的导航栏设置为在用户将鼠标悬停在导航栏元素上时更改它们的图像，但我还希望它在用户单击该图像并发送时将图像从默认图像更改为悬停图像到另一页。我正在尝试使用 active 属性来执行此操作，但它似乎不起作用。

HTML:

<a href="index.html" >
                    <div class="navbar-image" id="navbar-image-ID2Games">
                    </div>

                    <br>
                    <div class="navbar-text">
                        ID2 Games
                    </div>
                </a>

CSS:

#navbar-image-ID2Games { 
    margin: 0 auto;
    width: 3.5rem; 
    height: 3.5rem; 
    background-repeat: no-repeat;
    background: url(http://i.imgur.com/Ou5cX4D.png); 
    background-size: contain;
} 

#navbar-image-ID2Games:hover {
    margin: 0 auto;
    width: 3.5rem; 
    height: 3.5rem; 
    background: url(http://i.imgur.com/Tx0SVZr.png) no-repeat;
    background-size: contain;
}

#navbar-image-ID2Games:active {
    margin: 0 auto;
    width: 3.5rem; 
    height: 3.5rem; 
    background: url(http://i.imgur.com/Tx0SVZr.png) no-repeat;
    background-size: contain;
}

JSFiddle 给你一个想法:https://jsfiddle.net/y1yv54qu/1/

Answer 1

jquery 解决方案怎么样？

<a href="#"><div class="navbar-image original"></div></a>

CSS

.navbar-image {
background-repeat:no-repeat;
background-size:cover;
background-position:center;
display:block;
width: 3.5rem; 
height: 3.5rem; 
}
.navbar-image:hover {
 background-image:url(http://i.imgur.com/Tx0SVZr.png);
}
.original{
background-image:url(http://i.imgur.com/Ou5cX4D.png);
}
.new-nav{
background-image:url(http://i.imgur.com/Tx0SVZr.png);
}

查询

$('.navbar-image').on({
click: function(){
$(this).addClass('new-nav').removeClass('original');
                }
});

演示 http://jsfiddle.net/sandiiev/ee293mbo/