$(this).children / find is not working

Question

I got a very simple code that should work. I can't understand why is not working.

I have:

<div class="mix category-1" onmouseover="showdescrmini()">
          <img src="large-464x400.jpeg" class="coverimgminipost">
          <h2 class="miniposttitle">Title</h2>
</div>

And the script:

function showdescrmini()
        {
         $(this).children('.miniposttitle').css('color','red');
        }

I already tried:

function showdescrmini()
        {
         $(this).find('.miniposttitle').css('color','red');
        }

If I put an alert() in the script, it appears when the mouse is over, so the problem is that single line.

Thanks in advance!

Answer 1

In your function, this points to window, not div element. Use onmouseover="showdescrmini(this)" and your function should look like this:

function showdescrmini(div)
{
         $(div).children('.miniposttitle').css('color','red');
}

Answer 2

     //In html you should pass this in function

      <div class="mix category-1" onmouseover="showdescrmini(this)">
             <img src="large-464x400.jpeg" class="coverimgminipost">
             <h2 class="miniposttitle">Title</h2>
      </div>

      //in javascript accept this as parameter thisObj
     function showdescrmini(thisObj)
     {
        $(thisObj).children('.miniposttitle').css('color','red');
     }

Answer 3

You should pass a parameter in your function like below and then where you call the function target which want to perform the function for where you use this as the current element:

script...

function showdescrmini(target)
{
         $(target).children('.miniposttitle').css('color','red');
}

html...

<div class="mix category-1" onmouseover="showdescrmini(this)">
          <img src="large-464x400.jpeg" class="coverimgminipost">
          <h2 class="miniposttitle">Title</h2>
</div>

---

But I would recommend you not to use inline javascript and so far for this use like this in your js script file:

$('.mix.category-1').hover(function(){
      $(this).children('.miniposttitle').css('color','red');
});

Answer 4

In your code, in the function $(this) is point to DOM root

Try this

$(".mix.category-1").mouseover(function(){
  $(this).children('.miniposttitle').css('color','red');
});

$(this) is point to your target element