Question

所以我正在设计一个主页底部带有圆形图标的网站。图标是图片，当用户的鼠标切换到图片时，我希望图片淡出到33％并显示一段文字。我有一切工作，除了jQuery也淡出出现的文本，我不希望它做。例如，我想淡化“circular_one”而不淡化“abt”。这是我的代码：

        <div class="bottom_images">
            <div class="row">
                <div class="col-md-4">
                    <div class="circular_one">
                        <p class="abt" id="abt">About</p>
                    </div>  
                </div>      
                <div class="col-md-4">  
                    <div class="circular_two">
                        <p class="adv" id="adv">Adventure</p>
                    </div>  
                </div>      
                <div class="col-md-4">  
                    <div class="circular_three">
                        <p class="int" id="int">Intellect</p>
                    </div>
                </div>      
            </div>                  
        </div>

CSS：

.circular_one .abt {
text-transform: uppercase;
padding-top: 110px;
padding-right: 110px;
padding-left: 90px;
padding-bottom: 110px;
display: none;
font-size: 35px;

}

.circular_two .adv {
text-transform: uppercase;
padding-top: 110px;
padding-right: 110px;
padding-left: 45px;
padding-bottom: 110px;
display: none;
font-size: 35px;

}

.circular_three .int {
text-transform: uppercase;
padding-top: 110px;
padding-right: 110px;
padding-left: 60px;
padding-bottom: 110px;
display: none;
font-size: 35px;

jQuery的：

var main = function() {

$('.circular_one').mouseenter(function() {

    $(this).fadeTo("slow", 0.33);
    $('.abt').show();

});     

$('.circular_one').mouseleave(function() {

    $(this).fadeTo("slow", 1);
    $('.abt').hide();   

});     

$('.circular_two').mouseenter(function() {

    $(this).fadeTo("slow", 0.33);
    $('.adv').show();

}); 

$('.circular_two').mouseleave(function() {

    $(this).fadeTo("slow", 1);
    $('.adv').hide();

});     

$('.circular_three').mouseenter(function() {

    $(this).fadeTo("slow", 0.33);
    $('.int').show();

}); 

$('.circular_three').mouseleave(function() {

    $(this).fadeTo("slow", 1);
    $('.int').hide();

});         
};


$(document).ready(main);

Answer 1

您需要检查e.target以查看实际点击了哪个元素：

e.g

$('.circular_two').mouseenter(function(e) {  //added 'e' here 
    if ($(e.target).is('.circular_two'))   // check to verify if this is the same element where we need fading
        $(this).fadeTo("slow", 0.33);
        $('.adv').show();
    } // end if
});

对其他人做同样的事。

Answer 2

当您将不透明度更改为元素时，它会影响其子元素。在下面的例子中，我将元素兄弟姐妹改为彼此，将它们保持在同一水平。

你重复自己很多。创建一个公共circular类并将事件绑定到：

hover事件是mouseenter和mouseleave的组合：

$('.circular').hover(function(){
    $(this).find('div').stop(true).fadeTo(200, '0.3');
}, function(){
    $(this).find('div').stop(true).fadeTo(200, '1');
});

Nore，我stop()动画，以防止他们排队。

http://jsfiddle.net/bxomf6z6/1/

jQuery - 如何从fadeTo中排除<p> </p>

2 个答案: