我在尝试这样一个动作,鼠标划过DIV时,改变背景图片。
图片2的地址存放在一个DIV里,鼠标划过DIV后替换图片2的网址进入第一个DIV的背景地址。代码如下。 <script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myhover').hover(function(){
var newsrc = $(this).find('#replace').html();
$(this).children('#logo').attr('background-image', 'url(' + newsrc + ')');
//劳驾再加一个 no-repeat 0 0; 0 0可以用background-position,那么no-repeat呢?
});
});
</script>
<div id="header">
<a id="myhover"><div id="logo" style="background:url(image1.jpg) no-repeat 0 0;"></div></a>
<div id="replace" style="display:none;">image2.jpg</div>
</div>
如果把图片2的网址直接放在jquery代码里替换,可以实现。但是如果要按我的要求,替换图片地址从一个display:none的DIV,到前一个DIV的背景地址,如何实现?谢谢。
图片2的地址存放在一个DIV里,鼠标划过DIV后替换图片2的网址进入第一个DIV的背景地址。代码如下。 <script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myhover').hover(function(){
var newsrc = $(this).find('#replace').html();
$(this).children('#logo').attr('background-image', 'url(' + newsrc + ')');
//劳驾再加一个 no-repeat 0 0; 0 0可以用background-position,那么no-repeat呢?
});
});
</script>
<div id="header">
<a id="myhover"><div id="logo" style="background:url(image1.jpg) no-repeat 0 0;"></div></a>
<div id="replace" style="display:none;">image2.jpg</div>
</div>
如果把图片2的网址直接放在jquery代码里替换,可以实现。但是如果要按我的要求,替换图片地址从一个display:none的DIV,到前一个DIV的背景地址,如何实现?谢谢。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title> new document </title>
<meta name="keywords" content="">
<meta name="description" content="">
<script type="text/javascript" src="js/jq.js"></script>
<style type="text/css">
#logo{width:760px;height:500px;}
</style>
</head> <body>
<script type="text/javascript">
$(document).ready(function() {
$('#myhover').mouseover(function(){
var newsrc = $(this).next('#replace').html();
alert(newsrc);
$(this).children('#logo').css('background', 'url(' + newsrc + ') no-repeat 0 0');
//劳驾再加一个 no-repeat 0 0; 0 0可以用background-position,那么no-repeat呢?
});
});
</script>
<div id="header">
<a id="myhover"><div id="logo" style="background:url(img/11.jpg) no-repeat 0 0;"></div></a>
<div id="replace" style="display:none;">img/22.jpg</div>
</div>
</body>
</html>