1

当我悬停几个链接时,我可以更改 div 的背景图像吗?我的意思是,如果我将鼠标悬停在链接 1 上,则有一个背景,链接 2 是另一个背景,依此类推。

<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并订阅 mouseover 事件。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

有很多方法可以做到这一点。一种简单的方法是给你的 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>

然后将 JavaScript 与 jQuery 一起使用:

$('#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_redlink_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");
    }
    );

您的 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;
}
于 2013-01-28T17:18:30.277 回答