Question

我有一个div（CSS - 身高：250px，宽度：70％），我已经通过CSS设置了背景。我想改变背景onhover。

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

例如：

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

有人可以帮我吗？

Answer 1

如果你不使用jQuery，你可以使用基本的事件监听器来达到预期的效果。 https://jsfiddle.net/gnu9utos/3/

// 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 + ')'; 
        });
    }
}

~~你可能想要为mouseleave添加一个检查以将图像恢复为原始状态~~并添加一点css。

我希望这很有帮助。

Answer 2

你可以用这个简单的JQ

来做到这一点

也许这不是最好的解决方案，但它确实有效。我添加了background-color，以便您可以看到更改。但您可以将其删除，只留下background-image

见这里 jsfiddle

制作2个变量并将它们分配给每个图像（img之前和之后）到每个div .somediv

向background-image

添加初始div

然后在悬停时，div的background-image会在imgbefore和imgafter之间发生变化

jq：

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

});

HTML：

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

CSS：

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

让我知道是否有帮助

Answer 3

你可以添加你喜欢的所有div，只改变数据imgbefore和data-imgafter !!!

$(document).ready(function(){
	
	$('.somediv').each(function( index, value ) {
		var img = $(this).attr('data-imgbefore');
		$('.somediv').css({'background-image':'url('+ img +')', 'background-size':'200px 200px'});
	});
	
	//$('.somedive').css({'background-image':'url("http://www.palladio-tv.it/Internet/siti_gec/2B/Manzan_Disney/codice/Pippo.png")', 'background-size':'200px 200px'});
	
	$('.somediv').hover(

		function () {
			var img = $(this).attr('data-imgafter');
			$(this).css({'background-image':'url('+ img +')', 'background-size':'200px 200px'});
		}, 

		function () {
			var img = $(this).attr('data-imgbefore');
			$(this).css({'background-image':'url('+ img +')', 'background-size':'200px 200px'});
		}
	);
});

.somediv {width:200px;height:200px;border:1px solid #F2F2F2;border-radius:4px;display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div class="somediv" data-imgbefore="http://www.palladio-tv.it/Internet/siti_gec/2B/Manzan_Disney/codice/Pippo.png" data-imgafter="http://www.filastrocche.it/contenuti/wp-content/uploads/2001/04/pippogoofy_352.jpg"></div>
<div class="somediv" data-imgbefore="http://www.palladio-tv.it/Internet/siti_gec/2B/Manzan_Disney/codice/Pippo.png" data-imgafter="http://www.filastrocche.it/contenuti/wp-content/uploads/2001/04/pippogoofy_352.jpg"></div>

干杯!!!

Answer 4

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

changebg = function(el, i) {
	var t = "url("+i+")";
	el.style.backgroundImage = t;
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="somediv" id="mydiv" data-imgbefore="http://lorempixel.com/400/200/sports" data-imgafter="http://lorempixel.com/400/200/animals" onmouseover="changebg(this, this.dataset.imgafter)">Lorem</div>
</body>
</html>

Answer 5

不确定我是否理解您要完成的任务。为什么不放弃HTML标记要求并尝试使用css：hover？

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

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

http://www.w3schools.com/cssref/css3_pr_background.asp

通过HTML标记更改div的背景URL

5 个答案: