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);
}

Jquery的

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

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

Answer 2

您可以使用:focus获得与点击事件类似的行为。

要使其工作，您需要使用tabindex属性。例如，

＆lt; div class =＆＃34; navbar-image＆＃34; ID =＆＃34;导航栏-图像ID2Games＆＃34;的的tabindex =＆＃34; 0＆＃34; ＆GT; ＆LT; / DIV＆GT;

然后在CSS中：

#navbar-image-ID2Games:focus { background: url(http://i.imgur.com/Tx0SVZr.png) no-repeat; outline: none; /* to remove default outline for focus elements */ /* other styles */ }

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

2 个答案: