Question: I'm working on a jQuery hover code snippet that will add markup on hover and then work with the class. Here is the JS.

```
$('.port-item').hover(function(){
        var $this = $(this);
        var name = $($this.find("img")).attr('title');
        $this.append('<div class="port-item-cover"><h3>' + name + '</h3><div>');
        $($this.children(".port-item-cover")).fadeIn();
    }, function(){
        $($(this).children(".port-item-cover")).fadeOut();
});

```

The HTML markup is pretty simple:

```
<div class="port-item">
   <a href="/portfolio/#/<?=$p['shortname']?>">
      <img src="images/portfolio/p_<?=$p['shortname']?>0.jpg" title="<?=$p['title']?>">
   </a>
</div> 

```

Two Questions: the main one is, how do I avoid the double lookups in jquery `$($(this).children("#element"))` to look up the child elements inside the current scope? It's pretty ugly in the second function, is there a better way?

The second question is what is the best way to check if this has been previously hovered over before and if the markup is there so I do not add it on subsequent hovers.

Answer: 
1. All jQuery traversal methods already return jQuery objects; you never need to write `$($this.children())`.
2. No.

a. Mouseleave should never fire without mouseenter.

b. If there aren't any matching elements, nothing will happen; you won't get an error.

However, you need to remove the element after the animation finishes; right now, you're adding a separate element on every hover.

Note that you simplify your `mouseenter` to

```
$('<div class="port-item-cover"><h3>' + name + '</h3><div>')
    .appendTo(this)
    .fadeIn();

```
For the first question, use this instead:

```
$(this).children("#element")

```