mouseover事件控制fadeto

Question

我试图使图像 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>

Answer 1

你的 <img> 之后 </div> 有一个语法错误，我认为这是一个错误的拼写错误

如果您的 img 带有 class 框使用

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

而不是

$(this).children("div")

如果您的 img 没有任何 class 只需使用

 $(this).find("img")

Answer 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

将找到作为目标节点子节点的任何元素

mouseover事件控制fadeto

mouseover event to control fadeto

javascript

jquery

mouseover

mouseenter

fadeto