Javascript 通过HTML标记更改div的背景url

我有一个div-CSS-height:250px，width:70%，我通过CSS设置了一个背景。我想更改悬停时的背景

这很简单，我知道。但是我想从HTML标签中获取背景的来源

例：

---

有人能帮我吗？

我不确定我是否理解你想要实现的目标。为什么不放弃HTML标记要求，试试css:hover

#somediv {
    background: url(...);
}

#somediv:hover {
    background: url(...); /* different url */
}

---

如果不使用jQuery，则可以使用基本事件侦听器实现所需的效果

您可能需要添加一个mouseleave检查，将图像恢复到原始状态，并添加一点css

---

我希望这是有帮助的。

你可以用这个简单的JQ来做这件事

也许这不是最好的解决方案，但它很有效。我添加了背景色，这样你就可以看到变化。但您可以删除它，只留下背景图像

看这里

制作2个变量，并在img之前和之后将它们分配给每个带有class.somediv的div

向div添加初始背景图像

然后在悬停时，div的背景图像在imgbefore和imgaafter之间变化

jq:

HTML:

<div class="somediv" data-imgbefore="img1.png" data-imgafter="img2.png"></div>

---

如果有帮助，请告诉我。您可以添加所有喜欢的div，只更改前面的数据imgbefore和后面的数据imgbefore

$document.readyfunction{ $'.somediv'.eachfunction索引，值{ var img=$this.attr'data-imgbefore'； $'.somediv'.css{'background-image'：'url'+img+，'background size'：'200px 200px'}； }; //$'.somedive.css{'background-image'：'urlhttp://www.palladio-tv.it/Internet/siti_gec/2B/Manzan_Disney/codice/Pippo.png'背景大小'：'200px 200px'}； $'.somediv'。悬停 作用{ var img=$this.attr'data-imgafter'； $this.css{'background-image'：'url'+img+，'background size'：'200px 200px'}； }, 作用{ var img=$this.attr'data-imgbefore'； $this.css{'background-image'：'url'+img+，'background size'：'200px 200px'}； } ; }; .somediv{宽度：200px；高度：200px；边框：1px实心F2F2F2F2；边框半径：4px；显示：块；}

---

您可以使用javascript轻松实现这一点。您还可以添加onmouseleave函数，但这次将this.dataset.imgbefore作为第二个参数传递

changebg=functionel，i{ var t=url+i+； el.style.backgroundImage=t； } 洛勒姆

---

你试过写一些代码吗？告诉我们你试过什么？我不知道从哪里开始。。。我脑子里没想什么，谷歌一下，看看你有什么想法；findI很容易从数据库中获取这两个图像，并将它们直接回送到HTML标记中，因为这些div会更多，并且每个div都有自己的图像。非常感谢，这就是我一直在寻找的！非常感谢你！我已经添加了更多的div来模拟未来的工作，它只适用于其中一个潜水。。。我不知道您为什么需要将document.querySelector更改为document.querySelector all。然后需要循环使用该元素，并将元素更改为返回数组的循环索引。

// first get the element that we'll be interacting with
var element = document.querySelector('.somediv');

// assuming we managed to successfully get the element from the document
if(element) {
    var before = element.getAttribute('data-imgbefore');
    var after = element.getAttribute('data-imgafter');

    if(before && after) {
        element.style.background = 'url(' + before + ')'; // set the initital state

        element.addEventListener('mouseover', function(event) {
            element.style.background = 'url(' + after + ')';
        });

        element.addEventListener('mouseout', function(event) {
            element.style.background = 'url(' + before + ')'; 
        });
    }
}

$(".somediv").each(function(){  

  var imgbef = $(this).data("imgbefore"),
      imgaft = $(this).data("imgafter")
  $(this).css({'background-image': 'url(' + imgbef + ')','background-color':'red'});

  $(this).hover(function(){

     $(this).css({'background-image': 'url(' + imgaft + ') ','background-color':'blue'});
  }, function(){
     $(this).css({'background-image': 'url(' + imgbef + ')','background-color':'red'});
  });

});

<div class="somediv" data-imgbefore="img1.png" data-imgafter="img2.png"></div>

.somediv {
   height:250px;
   width:70%;  
 }