jQuery悬停Alt标签问题 [英] jQuery Hover Alt Tag Issue

问题描述

最近我问了一个问题，当您将鼠标悬停在图像中心时，会获得图像中心显示的图像的alt标记，幸好获得了以下代码。

 < script type =text / javascript> 
 $（document）.ready（function（）{
 $（'＃illustration-content ul li img'）。hover（
 function（）{
 $（this） .css（'opacity'，'。2'）; 
 var a = $（this）.attr（'alt'）; 
 $（this）.parent（）。append（'< div class =title>'+ a +'< / div>'）; 
}，
 function（）{
 $（this）.css（'opacity'， '1'）; 
 $（this）.next（）。remove（'。title'）; 
} 
）; 
}）; 
< / script> 
  

这很好。

我现在遇到的问题是，如果光标在图像中心位置移动到alt标记上时，它会使整个效果消失。我只希望效果在光标离开图像时消失。

这里是我使用的CSS，而html是一个简单的UL列表图像。 p>

 ＃illustration-content ul li img {
 position：relative; 
} 
 
 .title {
 position：absolute; 
 z-index：1000; 
 width：100px; 
 margin：80px 0px 0px -150px; 
颜色：#fff; 
 font-size：18px; 
 display：inline-block; 
} 
  

我尝试过并且没有嵌入块，结果相同，但是标签需要有不同的位置。

任何想法为什么会发生这种情况？

以下是问题：。

  var $ lis = $（'＃illustration-content ul li' ）; 
 $ b $ lis.each（function（index，el）{
 var $ this = $（el）; 
 var eImg = $（img，$ this）; 
 
 $ this.mouseenter（function（）{
 var eTitle = $（'< div class =title>'+ eImg .attr（'alt'）+'< （）; / div>'）; 
 eImg.css（'opacity'，'。1'）; 
 $ this.prepend（eTitle）; 
}）。 
 var eTitle = $（div.title，$ this）; 
 eImg.css（'opacity'，'1'）; 
 eTitle.remove（'。title'）; 
}）; 
}）; 
  

---

替代解决方案

不是在每个 mouseenter / mouseleave 创建和销毁div，最好在处生成div一次， document.ready（），并在用户将鼠标悬停在它们上方时显示/隐藏它们。

它实际上应该会提高整体性能。

下面是一个例子。

默认情况下， .title 的样式属性 display：none 。

  var $ lis = $（'＃illustration-content ul li'）; 
 $ b $ lis.each（function（index，el）{
 var $ this = $（el）; 
 var eImg = $（img，$ this）; 
 var eTitle = $（'< div class =title>'+ eImg.attr（'alt'）+'< / div>'）; 
 
 $ this .prepend（eTitle）
 .mouseenter（function（）{
 eImg.css（'opacity'，'。1'）; 
 eTitle.show（）; 
}） 
 .mouseleave（function（）{
 eImg.css（'opacity'，'1'）; 
 eTitle.hide（）; 
}）; 
} ）; 
  

---

其他信息，很好的了解

请注意，我使用 mouseenter code> 和 mouseleave 而不是 hover 。悬停实际上是这两个事件相结合的速记功能。我倾向于使用前者，因为它通常更容易阅读，而且更可靠。

另外请注意，在这两种解决方案中，我都使用了 .each（） 。
通过将元素分配给变量，JQuery将不必浪费更多的处理来在每次引用它们时查找节点;使得它更有效率。

通过在选择器中传递一个元素作为第二个参数，就像这样

  $（。title，parent_element）.css（...）; 
  

我不必使用像 .children（） 或 .next（） 。这是非常有效的。

你提到你很难用位置 ing，看看这个，它可能会澄清一些事情。

---

唷，这些长篇帖子很难阅读，呃？那么，我想我已经涵盖了所需的一切。

祝你好运&快乐的编码！ ：）

I recently asked a question to get the alt tag of an image displayed in the center of the image when you hover over it, and was thankfully provided with this following code to do so.

<script type="text/javascript">
    $(document).ready(function () { 
        $('#illustration-content ul li img').hover(
            function(){
                $(this).css('opacity','.2');
                var a = $(this).attr('alt');
                $(this).parent().append('<div class="title">' + a + '</div>');
            },
            function(){
                $(this).css('opacity','1');
                $(this).next().remove('.title');
            }
        );
    });
</script>

This works great.

The issue I now have is that if the cursor moves over the alt tag when its in the center of the image, it makes the whole effect disappear. I only want the effect to disappear when the cursor leaves the image.

Here is the css I am using and the html is a straight forward UL list of images.

#illustration-content ul li img{
    position: relative;
}

.title{
    position: absolute;
    z-index: 1000;
    width: 100px;
    margin: 80px 0px 0px -150px;
    color: #fff;
    font-size: 18px;
    display: inline-block;
}

I've tried with and without the inline block, same result, but the tag needs to be positions differently.

Any ideas why this may be happening?

Here is an example of the problem: http://jsfiddle.net/ysSJu/

Thanks for any support.

解决方案

Explanation

The reason why the effect disappears when you hover over the title, is because you have the event for the img element only.
Instead, you should "link" the event to the entire li, so that when a user hovers over the list item, the entire element, including the div.title, will be affected.

In the above image, you can see how it works.

Currently, you have your events linked to what corresponds to green, img. This means that the div.title, yellow, will be treated as an "outside" element (because the div.title isn't inside the img element), and therefore the mouseleave event will trigger when you hover over the div.title.
If you link the events to the li, red, the event will encompass everything within the red border, which is green and yellow.

You also have to treat your li blocks as display: inline-block so that you can position the title in relation to the image.

So, basically, what I'm trying to say is, instead of

$('#illustration-content ul li img'); 

you should do

$('#illustration-content ul li'); 

Then adjust the code accordingly.

---

Solution

Here is a working solution.

var $lis = $('#illustration-content ul li');

$lis.each(function(index, el){
    var $this = $(el);
    var eImg = $("img", $this);

    $this.mouseenter(function(){
        var eTitle = $('<div class="title">' + eImg .attr('alt') + '</div>');
        eImg.css('opacity','.1');
        $this.prepend(eTitle);
    }).mouseleave(function(){
        var eTitle = $("div.title", $this);
        eImg.css('opacity','1');
        eTitle.remove('.title');
    });
});

---

Alternative solution

Instead of creating and destroying a div at every mouseenter/mouseleave, it might be better to produce the div's just once at document.ready(), and show/hide them when a user hovers over them.
It should actually increase overall performance.

Here's an example.

By default, the .title has the style property display: none.

var $lis = $('#illustration-content ul li');

$lis.each(function(index, el){
    var $this = $(el);
    var eImg = $("img", $this);
    var eTitle = $('<div class="title">' + eImg.attr('alt') + '</div>');

    $this.prepend(eTitle)
        .mouseenter(function(){
            eImg.css('opacity','.1');
            eTitle.show();
        })
        .mouseleave(function(){
            eImg.css('opacity','1');
            eTitle.hide();
        });
});

---

Additional information, good to know

Note that I used the mouseenter and mouseleave instead of hover. Hover is actually a shorthand function of those two events combined. I tend to use the former, because it is generally easier to read, and more reliable.

Also note that in both solutions, I used the function .each(). By assinging the elements to variables, JQuery won't have to waste more processing to find the nodes every time I reference them; making it more efficient.

By passing an element as a second parameter in the selector, like this

$(".title", parent_element).css(...);

I don't have to use functions like .children() or .next(). It is also very efficient.

You mentioned you had hard time with the positioning, have a look at this, it might clarify things.

---

Phew, these long posts are hard to read, eh? Well, I think I've covered everything needed.

Good luck & happy coding! :)

这篇关于jQuery悬停Alt标签问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！