在鼠标悬停时更改背景颜色并在鼠标悬停后将其删除
Posted
技术标签:
【中文标题】在鼠标悬停时更改背景颜色并在鼠标悬停后将其删除【英文标题】：Change background color on mouseover and remove it after mouseout 【发布时间】：2011-04-14 01:25:09 【问题描述】：我有表是forum。我的jQuery代码：
<script type="text/javascript">
$(document).ready(function()
$('.forum').bind("mouseover", function()
var color = $(this).css("background-color");
$(this).css("background", "#380606");
$(this).bind("mouseout", function()
$(this).css("background", color);
)
)
)
</script>
它完美地工作，但是如果没有var color = $(this).css("background-color");，是否可以以更有效的方式做到这一点。在mouseout 之后离开之前的背景颜色并删除#380606？谢谢。
【问题讨论】：
您是否出于兴趣在 JQuery 中需要它？由于这是 CSS 的用途类型，因此以下答案之一在大多数情况下都是理想的。 【参考方案1】：如果你不关心 IE ≤6，你可以使用纯 CSS ...
.forum:hover background-color: #380606;
.forum color: white;
.forum:hover background-color: #380606 !important;
/* we use !important here to override specificity. see http://***.com/q/5805040/ */
#blue background-color: blue; <meta charset=utf-8>
<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>使用 jQuery，通常最好为这种样式创建一个特定的类：
.forum_hover background-color: #380606;
然后在鼠标悬停时应用该类，并在鼠标悬停时将其删除。
$('.forum').hover(function()$(this).toggleClass('forum_hover'););
$(document).ready(function()
$('.forum').hover(function()$(this).toggleClass('forum_hover'););
);.forum_hover background-color: #380606 !important;
.forum color: white;
#blue background-color: blue; <meta charset=utf-8>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>如果你不能修改类，你可以将原来的背景颜色保存在.data():
$('.forum').data('bgcolor', '#380606').hover(function()
var $this = $(this);
var newBgc = $this.data('bgcolor');
$this.data('bgcolor', $this.css('background-color')).css('background-color', newBgc);
);
$(document).ready(function()
$('.forum').data('bgcolor', '#380606').hover(function()
var $this = $(this);
var newBgc = $this.data('bgcolor');
$this.data('bgcolor', $this.css('background-color')).css('background-color', newBgc);
);
);.forum color: white;
#blue background-color: blue; <meta charset=utf-8>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>或
$('.forum').hover(
function()
var $this = $(this);
$this.data('bgcolor', $this.css('background-color')).css('background-color', '#380606');
,
function()
var $this = $(this);
$this.css('background-color', $this.data('bgcolor'));
);
$(document).ready(function()
$('.forum').hover(
function()
var $this = $(this);
$this.data('bgcolor', $this.css('background-color')).css('background-color', '#380606');
,
function()
var $this = $(this);
$this.css('background-color', $this.data('bgcolor'));
);
);.forum color: white;
#blue background-color: blue; <meta charset=utf-8>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>【讨论】：
不，实际上我需要在 Jquery 中完成，它只是一段代码。【参考方案2】：这应该直接在 CSS 中设置。
.forum background-color: #123456
.forum:hover background-color: #380606
如果您担心 IE6 不接受将鼠标悬停在非链接元素上，您可以使用 jQuery 的hover 事件来实现兼容性。
【讨论】：
【参考方案3】：试试这个，简单又好用
<html>
<head></head>
<body>
<div class="forum">
test
</div>
</body>
</html>
Javascript
$(document).ready(function()
var colorOrig=$(".forum").css('background-color');
$(".forum").hover(
function()
//mouse over
$(this).css('background', '#ff0')
, function()
//mouse out
$(this).css('background', colorOrig)
);
);
css
.forum
background:#f0f;
现场演示
http://jsfiddle.net/caBzg/
【讨论】：
您的变量 colorOrig 将返回 null，因为 jQuery 无法读取 css 属性“background”选择器...改用“background-color”或“backgroundColor”【参考方案4】：在您的 CSS 文件中设置原始背景颜色：
.forum
background-color:#f0f;
您不必在 jQuery 中捕获原始颜色。请记住，jQuery 会更改样式 INLINE，因此通过将 background-color 设置为 null 您将获得相同的结果。
$(function()
$(".forum").hover(
function()
$(this).css('background-color', '#ff0')
, function()
$(this).css('background-color', '')
);
);
【讨论】：
这是一个很好的答案！它工作得很好......在萤火虫中测试 谢谢，不胜感激！如果需要，可以包含 jquery.color 插件。然后你就可以用动画改变颜色了。例如$(this).animate(backgroundColor:'#ff0',400);【参考方案5】：HTML：
<div id="id">
</div>
<div id="hiddenDiv" style="display:none;"></div>
jQuery:
$('#id').hover(function()
$("#hiddenDiv").css('display','block');
,
function()
$("#hiddenDiv").css('display','none');
);
【讨论】：
【参考方案6】：经过一番努力，终于搞定了。 （完美测试）
下面的例子也将支持已经点击按钮的颜色不应该改变的事实
JQuery 代码
var flag = 0; // Flag is to check if you are hovering on already clicked item
$("a").click(function()
$('a').removeClass("YourColorClass");
$(this).addClass("YourColorClass");
flag=1;
);
$("a").mouseover(function()
if ($(this).hasClass("YourColorClass"))
flag=1;
else
$(this).addClass("YourColorClass");
;
);
$("a").mouseout(function()
if (flag == 0)
$(this).removeClass("YourColorClass");
else
flag = 0;
);
【讨论】：
【参考方案7】：这是我的解决方案：
$(document).ready(function ()
$( "td" ).on(
"click": clicked,
"mouseover": hovered,
"mouseout": mouseout
);
var flag=0;
function hovered()
$(this).css("background", "#380606");
function mouseout()
if (flag == 0)
$(this).css("background", "#ffffff");
else
flag=0;
function clicked()
$(this).css("background","#000000");
flag=1;
)
【讨论】：
以上是关于在鼠标悬停时更改背景颜色并在鼠标悬停后将其删除的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Material ui 数据表中悬停或鼠标悬停时更改表格行背景颜色