Question

我正在尝试使图像淡入到特定的不透明度，但是当鼠标悬停（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

你的</div>错误拼写错误<img>后我发现语法错误

如果你的img与类框一起使用

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

而不是

$(this).children("div")

如果您的img没有任何课程，请使用

 $(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

2 个答案: