如何将鼠标悬停在链接上时更改 DIV 背景

How to change DIV background when i hover a link?

本文关键字：DIV 背景 链接 鼠标 悬停      更新时间：2023-09-26

当我悬停几个链接时，我可以更改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>

使用数据属性

j查询： 

$('.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>

现场示例

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

是的，你可以在这里编写代码：

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

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

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

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

有很多方法可以做到这一点。一种简单的方法是给你的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_red 和 link_yellow ，然后从 JavaScript 中的 ID 中提取颜色。

试试这个：

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>

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

如果你喜欢纯JS。

parentNode 获取 u 使用的 onmouseover 的上述元素，

在这种情况下，u 在 a 元素上添加 onmouseover 以获取它的上述元素。

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

<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;
}
相关文章：