1

いくつかのリンクにカーソルを合わせたときに div の背景画像を変更できますか。つまり、link1 にカーソルを合わせると 1 つの背景があり、link2 に別の背景があるということです。

<div style="background: url(image1.jpg) no-repeat right; ">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>

JavaScript、jQuery、または単純な CSS トリックで実行できますか?

誰でも私が間違っていることを教えてください????

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$('.background-changer').on('mouseover', 'a', function () {

    var background = "url('" + $(this).attr('data-background') + "')";

    $('.background-changer').css('background-image', background)
});
</script>
</head>

<body>



<div style="background:url(http://i.dailymail.co.uk/i/pix/2013/01/01/article-2255449-16B57005000005DC-878_964x641.jpg) no-repeat right;" class="background-changer"> 

 <a href="#" data-background="https://twimg0-a.akamaihd.net/profile_images/1298643948/FranceFlag_svg.png">Link 1</a>
 <a href="#" data-background="http://cdn.londonandpartners.com/visit/london-organisations/houses-of-parliament/63950-640x360-london-icons2-640.jpg">Link 2</a>
 <a href="#" data-background="http://i.dailymail.co.uk/i/pix/2013/01/01/article-2255449-16B57005000005DC-878_964x641.jpg">Link 3</a> 
 <a href="#" data-background="http://us.123rf.com/400wm/400/400/godrick/godrick1002/godrick100200011/6503920-tower-bridge-london-england-uk-europe-illuminated-at-dusk.jpg">Link 4</a>

</div>
</body>
</html>
4

9 に答える 9

2

データ属性の使用

jQuery:

$('.background-changer').on('mouseover', 'a', function () {

    var background = "url('" + $(this).attr('data-background') + "')";

    $('.background-changer').css('background-image', background)
});

HTML:

<div style="background: url(image1.jpg) no-repeat right;" class="background-changer"> 

    <a href="#" data-background="image1.jpg">Link 1</a>
    <a href="#" data-background="image2.jpg">Link 2</a>
    <a href="#" data-background="image3.jpg">Link 3</a> 
    <a href="#" data-background="image4.jpg">Link 4</a>

</div>

実際の例

于 2013-01-28T17:16:34.940 に答える
1

はい、ここにコードがあります：

$('a').mouseover(function () {
    $(this).parent().css('background', new_background);
});

これはを使用してjQueryおり、すべてを選択しanchorsて、マウスオーバーイベントにサブスクライブします。CSS次に、ホバーされている要素の親に新しい背景属性値を適用します。を使用mouseout()して古い背景を元に戻すことができますが、アンカーからに移動するときにちらつき効果が得られるanchorため、タイムアウトを使用して背景を元に戻すことができます。現在、ドキュメント内のすべてのアンカーに適用されるため、参考までにセレクターをより具体的にします。divにIDまたは特定のクラスを指定して、div内のすべてのアンカーに制限します。

于 2013-01-28T17:14:27.963 に答える
1

例を見てください http://codepen.io/yardenst/pen/LJldn

データ属性を使用して背景色を宣言的に設定する

<div style="background: url(image1.jpg) no-repeat right; ">
  <a href="#" data-bg="yellow">Link 1</a>
  <a href="#" data-bg="green">Link 2</a>
  <a href="#" data-bg="#000">Link 3</a>
</div>

$("a").on("mouseover",function(){

  $(this).parent().css("background-color",$(this).attr("data-bg"));

});
于 2013-01-28T17:17:20.210 に答える
0

これを試して：

jQuery

$(document).ready(function(){
    $('.selector a').hover(function() {
        var targetBG = $(this).attr('id');

        $('.selector').css({'background':'url('+targetBG+'.jpg) no-repeat right'});
    });
});

HTML

<div class="selector" style="background: url(image1.jpg) no-repeat right; ">
      <a href="#" id="image1">Link 1</a>
      <a href="#" id="image2">Link 2</a>
      <a href="#" id="image3">Link 3</a>
      <a href="#" id="image4">Link 4</a>
</div>
于 2013-01-28T17:12:11.803 に答える
0

これを行うには多くの方法があります。簡単な方法の 1 つは、div に ID を指定し、各リンクに ID を指定することです。

<div id="parent" style="background: url(image1.jpg) no-repeat right; ">
  <a id="link1" href="#">Link 1</a>
  <a id="link2" href="#">Link 2</a>
  <a id="link3" href="#">Link 3</a>
  <a id="link4" href="#">Link 4</a>
</div>

次に、jQuery で JavaScript を使用します。

$('#parent a').hover(function() {
  var color;
  switch($(this).attr('id')) {
    case 'link1': color = 'red';    break;
    case 'link2': color = 'black';  break;
    case 'link3': color = 'yellow'; break;
    case 'link4': color = 'green';
  }

  $(this).parent().css({ 'background': color });
});

もちろん、意味のある ID を使用してください。

また、各背景色に CSS クラスを与え、それらをホバー時に親に割り当てるか、他の多数のソリューションを使用することもできます。アプリケーションにとって何が最も理にかなっているのかを理解することがすべてです。大量のリンクを作成する場合は、より動的なソリューションを使用することをお勧めします。たとえば、 や などのリンク ID をlink_red指定link_yellowし、JavaScript で ID から色を取得します。

于 2013-01-28T17:18:05.193 に答える
0

シンプルな JS を使用する:

<!DOCTYPE html>
<html>
<head>
    <script>

    function chgBG(e){
        document.getElementsByTagName('body')[0];
        body.style.backgroundImage = 'url(newImage.jpg)';
    }
    </script>
</head>
<body>
    <div id="focusArea" onmousemove="getPos(event)">
        <p>Mouse Over This Text And Background will change!</p>
    </div>
</body>
</html>
于 2013-01-28T17:19:49.497 に答える
0

bk 変数はデフォルトの色を保存し、ホバー機能を適用すると色が変わります。次に、マウスを離すと、デフォルトの色に置き換えます

 <div style="background: silver; ">
      <a href="#black">Link 1</a>
      <a href="#green">Link 2</a>
      <a href="#red">Link 3</a>
      <a href="#gray">Link 4</a>
    </div>



 var bk = $('div').css('background');
    $('a').hover(function(){
        $('div').css('background',$(this).attr('href').replace("#",''));
        // or 
        // $(this).parent().css('background',$(this).attr('href').replace("#",''));

    });
于 2013-01-28T17:22:30.550 に答える
-1 
onmouseover="this.parentNode.style.backgroundImage = 'url(newimage.gif)'"

あなたが純粋なjsを好むなら。

parentNode は、onmouseover を使用する要素の上記の要素を取得します。この場合、a 要素に onmouseover を追加して、その要素の上記の要素を取得します。

于 2013-01-28T17:16:44.203 に答える
-2

まず、インライン スタイルを回避できる場合は使用しないでください。

<div class="some-class-name">
  <a class="link1" href="#">Link 1</a>
  <a class="link2" href="#">Link 2</a>
  <a class="link3" href="#">Link 3</a>
  <a class="link4" href="#">Link 4</a>
</div>

.some-class-name {
    background: url(image1.jpg) no-repeat right;
}

jQuery を使用して、各リンクのホバー時に含まれる div にクラスを追加/削除することにより、背景画像を変更します。

$(".link1").hover(
  function () {
  $(this).parent().addClass("link1-bg");
},
  function () {
  $(this).parent().removeClass("link1-bg");
}
);

$(".link2").hover(
      function () {
      $(this).parent().addClass("link2-bg");
    },
      function () {
      $(this).parent().removeClass("link2-bg");
    }
    );

$(".link3").hover(
      function () {
      $(this).parent().addClass("link3-bg");
    },
      function () {
      $(this).parent().removeClass("link3-bg");
    }
    );

$(".link4").hover(
      function () {
      $(this).parent().addClass("link4-bg");
    },
      function () {
      $(this).parent().removeClass("link4-bg");
    }
    );

上記の jQuery コードによって追加される CSS クラス。

.link1-bg {
    background: url(link1-bg.jpg) no-repeat right;
}

.link2-bg {
    background: url(link2-bg.jpg) no-repeat right;
}

.link3-bg {
    background: url(link3-bg.jpg) no-repeat right;
}

.link4-bg {
    background: url(link4-bg.jpg) no-repeat right;
}
于 2013-01-28T17:18:30.277 に答える