Jquery toggleClass影響所有

我正在使用它作爲整個網站的按鈕。問題是，如果你將鼠標懸停在任何「.contentViewMore」上，那麼它將爲網站上的所有人執行此操作。有沒有辦法解決這個問題，所以它一次只能影響一個按鈕，或者更好的方式來做到這一點？Jquery toggleClass影響所有

JQUERY

<script type="text/javascript"> 
    $(document).ready(function() { 
$('.contentViewMore') 
    .hover(function(event) { 
$('.contentViewMoreInfo').toggleClass('contentViewMoreInfoHover'); 
     }); 
    }); 
</script>

CSS

.contentViewMore{ 
width: 807px; 
background: #e9e9e9 url('') left; 
padding-left: 33px; 
float: left; 
line-height: 30px; 
height: 30px; 
color: #565656; 
font-size: 10px; 
font-weight: bold; 
-moz-border-radius: 3px; 
-khtml-border-radius: 3px; 
-webkit-border-radius: 3px; 
    } 
    .contentViewMore span{ 
width: 77px; 
float: right; 
padding: 0px 33px 0px 10px; 
-moz-border-radius: 0px 3px 3px 0px; 
-khtml-border-radius: 0px 3px 3px 0px; 
-webkit-border-radius: 0px 3px 3px 0px; 
    } 
    .contentViewMoreInfoHover { 
background: #8eca45 url('') right; 
}

HTML

<a class="contentViewMore" href=""> 
    More Posters Available. 
<span class="contentViewMoreInfo">View More</span> 
</a>

Jsfiddle

來源

2011-08-12 Jacinto

似乎要匹配.contentViewMoreInfo<span>元素在懸停的錨點內。您可以使用find()：

$(".contentViewMore").hover(function(event) { 
    $(this).find(".contentViewMoreInfo").toggleClass("contentViewMoreInfoHover"); 
});

還是context參數$()：

$(".contentViewMore").hover(function(event) { 
    $(".contentViewMoreInfo", this).toggleClass("contentViewMoreInfoHover"); 
});

來源

2011-08-12 05:58:36

非常感謝您的工作。 – Jacinto

嘗試：

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.contentViewMore').hover(function(event) { 
     $(this).toggleClass('contentViewMoreInfoHover'); 
    }); 
}); 
</script>

來源

2011-08-12 05:56:29 kirbuchi

這會工作，但它使整個按鈕綠色。我只想做出綠色的部分。 – Jacinto

你可以用CSS做到這一點：

.contentViewMore:hover .contentViewMoreInfo { 
    background: #8eca45; 
}

你的代碼中包含了很多怪異的東西，爲什麼你的定位是沒有圖像的背景，爲什麼你設置url('')第一個地方？

如果你想用jQuery做到這一點，你就必須做到這一點：

$(function(){ /* shorthand for $(document).ready(function(){ */ 

    $('.contentViewMore').hover(function(){ 

     $('.contentViewMoreInfo',this).toggleClass('contentViewMoreInfoHover'); 

    }); 

});

來源

2011-08-12 05:56:53 Kokos

這樣的CSS是否可以在所有瀏覽器中使用？對不起後面的代碼只是沒有把圖標放在那裏，而是在這部分工作。 – Jacinto

而不是使用$('.contentViewMoreInfo')懸停的內部，使用$(this)

來源

2011-08-12 05:56:58 Neelesh

Jquery toggleClass影響所有

回答

相關問題