jquery颜色转换html,关于html：使用jQuery转换DIV背景

我对JQuery非常陌生，但已经非常喜欢它。

当用户将鼠标悬停时，我正在尝试更改div的背景。 但是我无法更新bg。 到目前为止，这就是我所拥有的：

Untitled Document

#fish{background-image:url(images/fish_off.jpg);width:459px;height:474px;}

$('#fish').hover(

function(){$('#fish').css({background:"url(images/fish_on.jpg)"})},

function(){$('#fish').css({background:"url(images/fish_off.jpg)"})}

);

这是我的测试页，基于以下信息，我仍然遇到问题：

测试页

使用.mouseenter()，或者如果您想在mouseout上应用一个类，请使用.hover()

http://api.jquery.com/mouseenter/

http://api.jquery.com/hover/

$("div").hover(

function () {

$(this).css("background","#ddd");

},

function () {

$(this).css("background","#ccc");

}

);

您也可以仅通过CSS来执行此操作，如果您只想要rollver

#fish { background: #fff;

#fish:hover { background: #ccc; }

查看有关使用悬停的工作小提琴

http://jsfiddle.net/faLdY/

通过jquery应用背景图片略有不同

查看这个类似的问题

使用jQuery切换DIV背景图片

注意示例页面中CSS的应用方式不正确。

更改

$('#fish').hover(

function(){$('#fish').css({background:"url(images/fish_on.jpg)"})},

function(){$('#fish').css({background:"url(images/fish_off.jpg)"})}

);

对此

$('#fish').hover(

function(){$('#fish').css("background-image","url(images/fish_on.jpg)")},

function(){$('#fish').css("background-image","url(images/fish_off.jpg)")}

);

编辑：

这是一个正在工作的小提琴，完全按照您的要求

http://jsfiddle.net/C7KxR/

顺便说一句，这直接链接到您的图像。我希望那没事。

我通常会使用css，但我还将显示一个隐藏的div，以使我可以同时执行它们

很公平。如果要显示隐藏的div，则可能需要查看toggle，slideToggle()或fadeToggle()以及jquery-ui库(如果要进一步控制动画)。

我已应用您的反馈，但仍看不到更改。我在帖子中在页面上方添加了一个链接。不确定我在做什么错吗？

@Denoteone我认为您的问题出在应用.css的方式上，我在查看测试页后更新了答案。

谢谢你的帮助。问题可能与我对jquery库的引用有关吗？

也许。我倾向于做两件事：1.将脚本保存在页面的末尾，然后包装$(function(){//此处是脚本})；在我的代码周围。这可能是这里的问题。

就是这样！谢谢你的帮助！

大！我猜该脚本在div存在之前已加载，因此具有fish ID的div在被调用时尚不存在。调用页面加载上的脚本，这样可以首先由浏览器加载页面。

$('#fish').hover(

function(){$('#fish').css({background:"url(images/fish_on.jpg)"})},

function(){$('#fish').css({background:"url(images/fish_off.jpg)"})}

);

您想使用带两个回调的.hover。一种用于mousein，一种用于mouseout。

更改

$('#fish').click(function()

{

$('#fish').css("background-image","url(images/fish_on.jpg)");

});

至

$('#fish').hover(function()

{

$('#fish').css("background-image","url(images/fish_on.jpg)");

}, function()

{

$('#fish').css("background-image","url(images/fish_ooff.jpg)");

});

只是为了让我明白第二个function()是将图像交换回正常...正确吗？

是。 .hover()具有2个函数，一个在mouseenter上，第二个在mouseleave上。请参阅api.jquery.com/hover

对，那是正确的。悬停主要只是mouseenter和mouseleave的别名。

您需要mouseover事件：

$('#fish').mouseover(...