jQuery при наведении непрозрачности

Я пытался и не смог заставить это работать. В основном я пытаюсь сделать так, чтобы при наведении курсора на один div он должен был изменить непрозрачность родного элемента на 0,5, у которого есть class="receiver".

Если вы видите это jsFiddle, это 2 элемента div с class="outerwrapper", и оба содержат 2 элемента div классов. hover и receiver. Когда вы наводите курсор на div с классом hover, непрозрачность receiver должна быть установлена ​​на 0,5, но только внутри того же div (внешняя обертка).

Любая помощь приветствуется. Заранее спасибо.


javascript html jquery hover
person jacktheripper    schedule 23.03.2012    source источник

Ответы (4)


arrow_upward
5
arrow_downward

Вам не нужно использовать для этого jQuery или JavaScript (хотя вы можете1), CSS вполне совместим с большинством браузеров достижение того же конечного результата:

.hover:hover + .receiver {
    opacity: 0.5;
}

демонстрация JS Fiddle.

А также, даже с «только» CSS, в современных/совместимых браузерах можно использовать переходы затухания (или, строго говоря, переход непрозрачности):

.receiver {
    width: 50px;
    height: 50px;
    background-color: blue;
    opacity: 1;
    -webkit-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -ms-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    transition: opacity 1s linear;
}

.hover:hover + .receiver {
    opacity: 0.5;
    -webkit-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -ms-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    transition: opacity 1s linear;
}
​

демонстрация JS Fiddle.

  1. Я также собирался предоставить решение JavaScript/jQuery, но сейчас уже опубликовано несколько других, и я не хотел бы повторять ответы других людей в своих собственных (это просто ощущается как плагиат/ копирование).
person David says reinstate Monica    schedule 23.03.2012
comment
О, я просто добавлял их, когда вы прокомментировали! =) И вам очень приятно, рад был помочь! = Д - person David says reinstate Monica; 24.03.2012

arrow_upward
3
arrow_downward

Что-то вроде этого: http://jsfiddle.net/UzxPJ/3/

$(function(){
    $(".hover").hover(
        function(){
            $(this).siblings(".receiver").css("opacity", 0.5);    
        },
        function(){
            $(this).siblings(".receiver").css("opacity", 1);  
        }        
    );            
});​

Ссылки

.siblings() — Получить братьев и сестер элемента — http://api.jquery.com/siblings/

.hover() — Перехватывать события mouseover/mouseout — http://api.jquery.com/hover/

person Christofer Eliasson    schedule 23.03.2012
comment
Отличный ответ +1, но я бы посоветовал использовать .fadeTo(0, 0.5); вместо .css(). редактировать: ооо и кешировать $(это), и использовать .on('hover', function) вместо .hover :) - person ninja; 24.03.2012
comment
@ninja вы не можете кэшировать $(this) здесь - это два отдельных обратных вызова. - person Alnitak; 24.03.2012
comment
@ninja Согласен, есть несколько способов добиться одного и того же. Я думал, что это было наиболее описательным, хотя. - person Christofer Eliasson; 24.03.2012
comment
@ninja и .on('hover', ...) не работают, если вам нужны отдельные входные и выходные функции. - person Alnitak; 24.03.2012
comment
@alnitak, это не так? сам не пробовал, но .hover просто указывает на .on('hover'... в источнике jquery, не так ли? - person ninja; 24.03.2012
comment
@ninja нет, это не так, .hover(a,b) делает .mouseenter(a).mouseleave(b||a). Версия .on() поддерживает только один обратный вызов. - person Alnitak; 24.03.2012
comment
@Alnitak Я думаю, вы могли бы передать событие обратному вызову в .on() и проверить его с помощью оператора if, было ли это событие ввода или выхода мыши, а затем действовать соответственно? Не пробовал, и это сделало бы паршивый беспорядочный пример, но я думаю, что это было бы возможно? - person Christofer Eliasson; 24.03.2012
comment
@ChristoferEliasson да, это сработает, но для этого тривиального примера проще иметь два обратных вызова. - person Alnitak; 24.03.2012

arrow_upward
2
arrow_downward 

$('.hover').hover(function() {
    $(this).next('.receiver').css('opacity', 0.5);
}, function() {
    $(this).next('.receiver').css('opacity', 1.0);
});

http://jsfiddle.net/2K8B2/

(используйте .siblings или .nextAll, если .receiver не обязательно является следующим элементом)

person Alnitak    schedule 23.03.2012

arrow_upward
0
arrow_downward

Это работает:

​$(document).ready(function() {
    $('.hover').hover(function() {
        var $parent = $(this).parent('.outerwrapper');
        $parent.find('.receiver').css({ opacity : 0.5 });
    }, function() {
        var $parent = $(this).parent('.outerwrapper');
        $parent.find('.receiver').css({ opacity : 1 });
    });
});​
person Dave Cottrell    schedule 23.03.2012
comment
... но это излишне сложно. Обход братьев и сестер очень эффективен в DOM — нет необходимости подниматься к родительскому узлу. - person Alnitak; 24.03.2012
comment
Да, это неправильное решение. Я уже проголосовал за .siblings() за лучшее решение. - person Dave Cottrell; 24.03.2012