如何在發佈後保持我的懸停效果

問題： 如何在觸發後保持我的懸停效果？我的意思是鼠標在發佈後沒有變化？我應該使用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/

編輯：我的意思是，比如：當我將鼠標懸停（在開始時）上容器標識（或者更確切的說是nav a），th寬度和不透明度懸停效果應該像現在一樣觸發，但是在釋放之後，所有內容都必須保持不變（寬度爲150％，不透明度爲1），同時我想仍然能夠觸發#nav li a的懸停效果。謝謝！

來源

2013-11-01 Stoyan Denkov

你可以添加一個類元素當你與jquery懸停。 – Matt

這可能不是推薦的行爲。用戶只會在移除懸停/鼠標懸停之前熟悉瞬態變化。我會建議不要這樣做......這聽起來像差勁的用戶體驗。 –

您可以使用jQuery：

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

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

來源

2013-11-01 15:26:06 DaniP

未按預期工作，請查看我的編輯。謝謝！ –

是否這樣？ http://jsfiddle.net/QnqZ7/15/ – DaniP

你可以實現這個是jQuery。例如：

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

當你將鼠標懸停<a>將在一個類的類「懸停」。然後在你的CSS中創建一個.hover類，並給它你想要的樣式。

來源

2013-11-01 15:19:16 Kevinvhengst

實際上我的目的是保持我的效果不變，在懸停發佈後，id - 容器（寬度：150％;不透明度：1;），但仍然可以觸發#nav li a的懸停 –

$（本）.toggleClass（ '懸停'）是短

來源

2013-11-01 21:11:41 ovgu12

如何在發佈後保持我的懸停效果

回答

相關問題