Событие mouseover для управления fadeto

Я пытаюсь заставить изображение исчезать до определенной непрозрачности, но срабатывает, когда указатель мыши (mouseenter, mouseleave) находится на родительском элементе div.

Приведенный ниже код показывает два элемента div (работает нормально), но по какой-то причине он не работает, когда я изменяю ".children(" div ")" на ".children(" img ")", учитывая, что у меня действительно есть изображение в там конечно.

Какой-то синтаксис или соглашение об именах я пропускаю?

$(document).ready(function(){
  
  $(".title").mouseenter(function(){
  $(this).children("img").fadeTo("fast", 0.8);
  });
  $(".title").mouseleave(function(){
        $(this).children("img").fadeTo("fast", 1.0);


  });
  
});
.wrap {
 width: auto;
 margin-left: 2%;
 margin-right: 2%;
 padding-left: 2%;
 padding-right: 2%;
 float: none;
}
.title {
 border: 1px solid #C1C1C1;
    background: #000;
 cursor: pointer;
 transition-property: all;
 transition-duration: 0.2s;
 transition-timing-function: ease;
 transition-delay: 0;
 margin-bottom: 0px;
 position: relative;
 margin-top: 40px;
}
img {
    height: 100px;
    width: 100px;
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  </head>
<div class="fluid wrap" ontouchstart="">
            <div class="title">
            <img src="https://inkplant.com/images/code/red-box.jpg"/>
            </div>
            </div>

Источник

2 ответа

Решение

Вы не упоминаете, где изображение, но я думаю, что вы хотите:

$(document).ready(function(){
  $(".title").mouseenter(function(){
        $(this).find("img").fadeTo("fast", 0.8);
        });
  $(".title").mouseleave(function(){
        $(this).find("img").fadeTo("fast", 1.0);
  });
});

Это потому что

.children

влияет только на прямых потомков вашего целевого элемента.

.find

найдет любой элемент, который является дочерним по отношению к целевому узлу

Источник

У вас есть синтаксическая ошибка с </div> после вашего <img> это неправильная опечатка, я думаю

если ваш img с использованием класса box

$(this).find(".box")

вместо

$(this).children("div")

если у вашего img нет никакого класса, просто используйте

 $(this).find("img")
Источник
Другие вопросы по тегам