css - 发布后如何保持悬停不变

Question

问题： 触发后如何保持悬停效果？我的意思是鼠标悬停后没有改变？我应该使用 jQuery 吗？提前致谢！

HTML：

<div id="container">
  <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
    </ul>
</div>

CSS：

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
  margin:0; padding:0; border:0;
}

#container {opacity:0.6;
  background: url("http://static.hothdwallpaper.net/51b761ec35af526775.jpg") no-repeat bottom;
  background-attachment:fixed;
  opacity:0.8;
  height: 100px;
  width:310px;
  margin:0 auto;
  -webkit-transition:all 0.4s linear;

}
#container:hover{

  width:150%;
  opacity:1;}

ul#nav {
    width: 310px; margin:0 auto; text-align: center; 
}
    ul#nav li {
        float: left; list-style: none; 
    }
        ul#nav li a {
            display: inline-block; width: 85px; height: 77px; 
            padding: 72px 0 0 0; margin: 0 32px 0 32px;
            font: bold 16px Helvetica, Arial, Sans-Serif; text-transform: uppercase;
            color: #000000; text-shadow: 0 1px 3px #c4bda6; text-decoration: none;

            background: url('http://line25.com/wp-content/uploads/2011/animated-menu/demo/images/label.png') 0 -149px no-repeat; 
        }
            ul#nav li a:hover {
                background: url('http://line25.com/wp-content/uploads/2011/animated-menu/demo/images/label.png') 0 0 no-repeat;
                color: #eee9d9; text-shadow: 0 2px 3px #4c2222;
            }

http://jsfiddle.net/QnqZ7/

编辑：我的意思是，例如：当我（在开始时）悬停在容器 id（或者更确切地说是 nav li a）上时，宽度和不透明度悬停效果应该像现在一样触发，但在它释放之后，一切都必须保持不变（150 % 宽度，不透明度 1)，同时我希望仍然能够触发 #nav li a 的悬停效果。谢谢！

Answer 1

您可以使用 Jquery：

$(document).ready (function () {
  $('#nav li a').hover (function (){
      $('#nav li a').removeClass('hover');
      $(this).addClass('hover');            
  });
})  

查看演示http://jsfiddle.net/QnqZ7/10/

Answer 2

你可以做到这一点的是jQuery。例如：

$("a").hover(
    function () {
        $(this).addClass('hover');
    },
); 

当您将其悬停<a>时，它将在班级“悬停”。然后在你的 CSS 中创建一个.hover类并给它你想要的样式。

Answer 3

$(this).toggleClass('hover') 更短