Question

当我悬停几个链接时，是否可以更改div的背景图像，我的意思是如果我将鼠标悬停在link1上，则会有一个背景，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>

Answer 1

使用数据属性

<强> 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>

Live example

Answer 2

是的，你可以在这里找到代码：

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

这是使用jQuery，您选择所有anchors并订阅mouseover事件。然后，在要悬停的元素的父级上应用新的CSS背景属性值。您可以使用mouseout()恢复旧背景，但是当从锚点移动到anchor时会产生一些闪烁效果，因此您可以使用超时来恢复背景。只是FYI使选择器更具体，因为它目前适用于文档中的所有锚点。通过给div提供ID或某个特定的类，将其限制在div中的所有锚点。

Answer 3

查看示例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"));

});

Answer 4

试试这个：

的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>

Answer 5

有很多方法可以做到这一点。一种简单的方法是给你的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类，并在悬停时将这些颜色分配给父类，或者使用大量其他解决方案。这一切都是为了找出最适合您应用的内容。如果您要获得大量链接，则需要使用更具动态性的解决方案，或者提供link_red和link_yellow等链接ID，然后从ID中提取颜色的JavaScript。

Answer 6

使用简单的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>

Answer 7

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("#",''));

    });

Answer 8

onmouseover="this.parentNode.style.backgroundImage = 'url(newimage.gif)'"

如果你喜欢纯粹的js。

parentNode获取上面使用onmouseover的元素，在这种情况下，你在a元素上添加onmouseover来获取它的上述元素。

Answer 9

首先，如果可以避免，请不要使用内联样式。

<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");
    }
    );

您的css类将由上面的jQuery代码添加。

.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;
}

当我悬停链接时如何更改DIV背景？

9 个答案: