Question

我希望当用户点击png时保留悬停<span>。当他再次点击它以返回原始形式时。

Answer 1

我已更新fiddle

试试这个：

var count = 0;
document.getElementsByClassName('home')[0].onclick = function() {
    count = 1 - count;
     if (count) {
        document.getElementById('navigationMenu').className = 'stayHover';
    }
    else {
        document.getElementById('navigationMenu').className = 'menuHover';
    }
}

如果您不介意为此导入jQuery，可以使用toggleClass。

Answer 2

您可以通过点击

添加“逗留”课程来完成此操作像这个小提琴一样：http://jsfiddle.net/F6Jqm/3/

区别在于css：

#navigationMenu a:hover span, #navigationMenu a.stay span{ 
    width:auto; padding:0   20px;overflow:visible; 
}

并添加了一些jquery：

$(document).ready(function(){
    $("a").click(function(){
        $(this).toggleClass("stay");
    });
});

Answer 3

这是一个只有CSS（没有Javascript）的解决方案。我只在firefox和chrome上测试过，但它应该在所有最近的浏览器上使用。

http://jsfiddle.net/F6Jqm/6/

我们的想法是使用伪选择器：选中已检查的输入类型和相对标签，并在图标上设置不透明度：0。

CSS：

#navigationMenu li{
    list-style:none;
    height:20px;
    width:20px;
}
#navigationMenu input[type=checkbox] {

    position:absolute;
    z-index: 1;
    opacity:0;
}
#navigationMenu span{
    width:0;
    left:22px;
    padding:0;
    position:absolute;
    overflow:hidden;


    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:20px;


    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    transition: 0.25s;
}

#navigationMenu label {
    background:url('http://www.tigercamera.com/front/img/home.png') transparent no-repeat;
padding:0px;
    height:20px;
    width:20px;
    display:block;
    position:relative;
    border: 0px;
}

/* General hover styles */

#navigationMenu input:hover + label span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu input:checked + label span{ width:auto; padding:0 20px;overflow:visible; }

/* Green Button */

#navigationMenu .home { background-position:0 0;}

#navigationMenu .home span{
    background-color:#7da315;
    color:#3d4f0c;
    text-shadow:1px 1px 0 #99bf31;
}

HTML：

<div id="main">

<ol id="navigationMenu">
    <li>
        <input name="check" type="checkbox"/>
        <label for="check" class="home">
            <span>Home</span>
        </label>
    </li>


</ol>

</div>

Answer 4

你去（用纯粹的js）：http://jsfiddle.net/F6Jqm/7/

var nav = document.getElementById('navigationMenu'),
items = nav.getElementsByTagName('a'),
i;

 for( i=0; i<items.length; i++){
   items[i].onclick = function(){
     if( this.classList.contains('active') ){ this.classList.remove('active') }else{
        this.className = this.className + ' active';
     }
   };
 }

如何在单击时从元素中删除悬停效果？

4 个答案: