javascript - タグの上にカーソルを置いた後に画像を表示する

Answer 1

data-[type]最良のアイデアは、 a を使用して、それを 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

次のように機能する jquery の hover メソッドを使用します。

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

http://api.jquery.com/hover/

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 + ')');
        }
    );