-5

idページに次のリンクがあります。

<div>
     <a href="#" id="eq1">Item 1</a>
     <a href="#" id="eq2">Item 2</a>
     <a href="#" id="eq3">Item 3</a>
</div>

css を使用してホバー機能を追加して、リンクをホバーすると、そのリンクに固有の画像がコンテナー div の背景画像として表示されるようにします。私はjqueryとjsにかなり慣れていませんが、可能であれば純粋なcssソリューションを好みます。

4

2 に答える 2

1

投稿でこの質問に対する答えがあります: hover CSS は次のようになります。

#eq1:hover {
background-image: url ('../link_to_file.png');
}

jQuery:

jQueryでそれを行うことができます。しかし、jQueryでそれを行うにはこれになります。また、画像はありますか? 画像のリンク方法をお伝えします。そのためにあなたのイメージを使用してください。

例：

$(document).ready(function () {
  $("#eq1").mouseover(function () { // function to run, when mouse comes over eq1
    $("div").css("background", "image_image_link.png");
  }
});

あなたが言ったので、使用する代わりに使用divすることもできます。親divに画像を表示したかったのです。(this).parent3 つのリンクすべてに対してコードを繰り返すことができます。

注: CSS プロパティを CSS の他の div に追加することはできません。そのためには、jQuery を使用する必要があります。

編集：

他の div に画像を追加したいと考えていました。それは次のようになります。

<div class="all-images">Add all the images here..</div>
<div class="image-viewer"></div>

これは実際には次のようなものです: これ.all-imagesはコンテナで、サムネイルなどのすべての画像が含まれます。そして、.image-viewer画像を表示するために使用されます。

$(document).ready(function () {
  $(".all-images").click(function () { //
    $(".image-viewer").css("background", "image_image_link.png");
   }
});

私が使用した例では、画像 ( ) をクリックする.all-imagesと、div に画像が表示されます。ただし、画像の名前のようなものを使用することを忘れないでください。jQuery はどの画像がクリックされたかを覚えていないためです。srcそのようなものを使用できますimg。

于 2013-09-09T15:43:37.580 に答える
0

これを試して

div:hover #id1{
   background: white url('path/to/image.png') no-repeat top left;
}
于 2013-09-09T15:38:45.883 に答える