javascript - 将鼠标悬停在标签上后显示图像

Answer 1

我认为最好的办法是使用 adata-[type]并将其与 ID、类或其他数据类型进行比较。你也可以通过课程来做到这一点。

这是一个小提琴。这是jQuery代码：

$("div#links > a").hover(
    function() {
        var ID = $(this).data("content");
        $("div#images").children("img#" + ID).fadeIn("slow");
    },
    function() {
        var ID = $(this).data("content");
        $("div#images").children("img#" + ID).stop(true).hide();
    }
);​

Answer 2

Answer 3

$('a').hover(
   function(){
      $('img').show();
   }, 
   function(){
      $('img').hide();
   } 
);

Answer 4

如果需要将 img 更改为 A 标签，则只能使用 css

.img{
    background: #222 url(/images/alert-overlay.png);
}
.img_hover{
    background: #222 url(/images/alert-overlay-hover.png);
}

用jQuery

$('a.orange').hover(
    function() {

        $(this).removeClass('img').addClass('img_hover');
    },
    function() {
        $(this).removeClass('img_hover').addClass('img');
    }
);

或仅使用 jquery

 $('a.orange').hover(
        function() {
            $(this).css('background-image', 'url(' + imageUrlHover + ')');
        },
        function() {
            $(this).css('background-image','url(' + imageUrl + ')');
        }
    );