logo标签列表

当鼠标悬停时更改背景颜色，并在鼠标移出后将其删除。

jquerymousemouseovermouseout
29

我有一个类名为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来处理，所以下面的答案之一在大多数情况下都是理想的。 - Amadiere
7个回答
56

如果您不在意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 https://dev59.com/6m025IYBdhLWcg3wyI-V/ */

#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完成这个任务，只是一小段代码而已。 - good_evening
20

在 CSS 文件中设置原始的背景颜色：

.forum{
    background-color:#f0f;
}​

在jQuery中，不需要捕获原始颜色。记住，jQuery会改变内联样式，因此将background-color设置为null即可得到相同的结果。

$(function() {
    $(".forum").hover(
    function() {
        $(this).css('background-color', '#ff0')
    }, function() {
        $(this).css('background-color', '')
    });
});​
1
这是一个很棒的答案！而且它完美地运行了... 在 Firebug 中进行了测试。 - Joberror
谢谢，感激不尽！如果您愿意，可以包含jquery.color插件。这样您就可以使用动画改变颜色。例如：$(this).animate({backgroundColor:'#ff0'},400); - Marc Uberstein
8
尝试这个，它有效且简单。
HTML
​​​​​​​​​​​​​​​​​​​​​<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，因为CSS属性“background”选择器无法被jQuery读取...请改用“background-color”或“backgroundColor”。 - Joberror
3

这应该直接在CSS中设置。

.forum {background-color: #123456}
.forum:hover {background-color: #380606}

如果你担心IE6不能接受非链接元素的hover效果，你可以使用jQuery的hover事件来提高兼容性。

1

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

经过长时间的努力，终于让它正常工作了。（完美测试）

下面的示例也支持这样一个事实：已点击按钮的颜色不应更改

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;
    }
});
0

这是我的解决方案：

$(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;
}
})
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接