JQUERY - Mouseout

Question

У меня проблемы с использованием .mouseout Я не эксперт:)

У меня есть набор изображений (с идентификаторами # image-1, # image-2 ..), которые при наведении курсора на набор с идентификаторами # для-image-1, # for-image-2 .. . дать непрозрачность назначенному изображению:

Это первая часть скрипта / WORKS FINE /, она удаляет непрозрачность всех изображений и добавляет непрозрачный класс к изображению, назначенному при наведении правильного

<script>
$(document).ready(function() {
  $("#secciones span").hover(function() {
    $("#golfball img").removeClass("opaque");

    var imageToShow = $(this).attr("id").replace("for-", "");
    $("#golfball #"+imageToShow).addClass("opaque");

  });
});

</script>

Это вторая половина, и там, где у меня возникла проблема, я хочу, чтобы первое изображение с идентификатором # image-1 восстановило прозрачность мыши из любого

<script>
$(document).ready(function() {
  $("#secciones span").mouseout(function() {
    $("#image-1").addClass("opaque");

  });
});

</script>

Заранее спасибо!

Answer 1

HTML

<div id='secciones'>
    <span>
        <div id='golfball'>
            <img src='http://kaczanowscy.pl/tomek/sites/default/files/test_result_green.png'><br />
            <img src='http://www.careercup.com/attributeimage?pid=microsoft-interview-questions'><br />
            <img src='http://img.brothersoft.com/games/flash/icon/m/math-test-3572-1264177735.jpg'>
        </div>
    </span>
</div>

Скрипт

$(function () {
    $('#golfball img').each(function () {
        $(this).css('opacity', '0.3').bind({
            mouseenter : function () {
                $(this).animate({
                    opacity : 1.0
                });
                //you may add class here
            },
            mouseleave : function () {
                $(this).animate({
                    opacity : 0.5
                });
                // you may remove class here
            }
        });
    });
});

---

DEMO

---

Answer 2

Функция jquery hover обычно принимает два аргумента: hoverIn и hoverOut.Вместо привязки события mouseout передайте функцию «make opaque» привязке hover.

$('#secciones span').hover(
    function() {
        $("#golfball img").removeClass("opaque");

        var imageToShow = $(this).attr("id").replace("for-", "");
        $("#golfball #"+imageToShow).addClass("opaque");

    },
    function() {
        $("#image-1").addClass("opaque");           
    }
);

Включая вторую функцию, вам не требуется указывать мышью, так как она уже контролируется функцией hover.

Answer 3

Вы должны использовать функцию наведения для вызова как мыши, так и мыши. Попробуйте это.

<script>
$(document).ready(function() {
   $("#secciones span").hover(function() {
       $("#golfball img").removeClass("opaque");

       var imageToShow = $(this).attr("id").replace("for-", "");
       $("#golfball #"+imageToShow).addClass("opaque");

   },
   function(){
       $("#image-1").addClass("opaque");
   });
});
</script>

Answer 4

Вам нужна поддержка IE6? Если да - дайте своему боссу понять, что IE6 отстой, и всем, кто его использует, не стоит быть вашим клиентом: P (о, если бы это было так просто ...). Но если вам это не нужно, вам вообще не нужен javascript, подойдет простой CSS:

Демо: http://jsfiddle.net/2GXny/

<div class="imgContainer">
  <img style="width:100px; height:100px;" src="./test.jpg" alt="some alt" />
  <span>lalalalalaa</span>
  <img style="width:100px; height:100px;" src="./test.jpg" alt="some alt" />
  <span>lalalalalaa</span>
</div>

С соответствующим CSS:

.imgContainer span { display: none; }
.imgContainer img:hover + span { display:inline; }

Очевидно, что для позиционирования диапазонов необходим стиль и т. Д. ... Хорошо работает во всех браузерах, но IE6 - очевидно ....

Answer 5

Не уверен, что я правильно понимаю, но если вы хотите вернуть непрозрачность, возможно, измените указатель мыши

 $("#image-1").addClass("opaque");

на

 $("#image-1").removeClass("opaque");

Answer 6

Возможно, это глупый вопрос, но есть ли причина, по которой вы используете hover в одном и mouseout в другом?

Кроме того, вы создали более одного элемента HTML с одинаковым идентификатором? Идентификаторы должны быть уникальными в вашем HTML, теги классов не должны быть. Это может вызвать нежелательные эффекты.

Страница API jQuery (http://api.jquery.com/mouseover/) для mouseover / mouseout показывает пример объединения этих двух событий в элементе:

$("div.overout").mouseover(function() {
    i += 1;
    $(this).find("span").text( "mouse over x " + i );
  }).mouseout(function(){
    $(this).find("span").text("mouse out ");
  });

Если я правильно понимаю, это то, что вы хотели бы сделать выстрел.