Question

我在div中有一个列表，当我将鼠标悬停在列表项上时，我想更改父div（#homepage_container）的背景图像。

这是网站： -

http://www.thebalancedbody.ca/

这可能吗？我猜我必须使用javascript。

由于

乔纳森

Answer 1

纯粹的javascript非常简单。

function changeBg(newBg)
{
    var imgdiv = document.getElementById("divwithbackground");
    imgdiv.style.backgroundImage = "url(" + newBg + ")";
}

或使用精灵：

imgdiv.style.backgroundPosition = "new position";

这可以在鼠标悬停时为您的任何li执行。 javascript中的事件注册可以通过多种方式完成，但要在脚本中执行，我建议使用QuirksMode的方法here。

类似的东西：

function addEventSimple(obj,evt,fn) {
    if (obj.addEventListener)
        obj.addEventListener(evt,fn,false);
    else if (obj.attachEvent)
        obj.attachEvent('on'+evt,fn);
}

负载：

// get the list items
var ul = document.getElementById("ulId");
var lis = ul.getElementsByTagName("li");

// add event handlers
for (var i = 0; i < lis.length; i++)
{
    addEventSimple(lis[i], "mouseover", (function(j) {
        return function() { 
            // get your background image from the li somehow
            changeBg(lis[j].id + "_bg.png");
        };
    })(i)); // use a closure to capture the current value of "i"
}

Answer 2

你必须使用JS。更好地学习像jQuery这样的东西。有了它，你将不得不做类似

的事情

var images = ['img1.jpg', 'img2.jpg', ...]

for (var i = 0; i < li_count; ++i) // li_count is the number of li's
    $('li:eq(' + i + ')').mouseover(function() {$('#homepage_container').css('background-image', images[i]})

无论如何，如果你想使用这种技术，你必须学习JS。请参阅http://www.w3schools.com/js/default.asp和基础知识，http://docs.jquery.com/Tutorials了解jQuery。

Answer 3

我建议为此安装Jquery库（jquery.com）

只需将其添加到标题中：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">

<script type="text/javascript">

      $(document).ready(function() {

          $('li').hover(function(){

         $('#homepage_container').css('background-image' : 'whatever.png');

            }

      });
</script>

Answer 4

如果您不关心IE6，可以使用CSS：

#homepage_container { background: url(normal.png); }
#homepage_container:hover { background: url(hover.png); }

将鼠标悬停在列表项上时，更改另一个div的背景图像

4 个答案: