[SOLVED] mouseover event to control fadeto

mouseover event to control fadeto

I'm trying to cause an image to fadeTo to a particular opacity but triggered when the mouseover (mouseenter, mouseleave) is on the parent div.

The code below shows two div elements (working fine) but for some reason it doesn't work when i change ".children("div")" to ".children("img")" given that I actually have an image in there of course.

Is there some syntax or naming convention I'm missing?

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

Solution

You don't mention where the image is, but I think you want:

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

This is because

.children

only affects direct descendants of your target element.

.find

will find any element that is a child of the target node