Question

我想要在悬停和点击链接后反转着色字体和背景的结果，但是我被卡在悬停链接颜色可能与背景颜色重合，我无法获得可逆性。

<script>
    $('#setup_list li a').click(function(){
        var link_id = $(this).attr('id');
        $('#setup_list li a').css('background-color','#3498DB');
        $('#setup_list > li > a').removeClass('link_activate');
        $(this).addClass('link_activate');
        $(this).css('background-color','#fff');
   });
</script>

我有一个项目附有悬停方法，当你悬停它时会在它上面显示另一个div ...不幸的是，一旦上面的div显示它重做动作（因为我为它添加了相同的类）实际上坚持下去）

li {
  list-style-type:none;
  margin:20px 0;
  float:left;
  cursor:pointer;
}

.navbar-sidebar li a {
    color:#fff;
    border:1px #3498DB solid;
  padding:5px;
  background-color: #3498DB;
  text-decoration:none;
}

.navbar-sidebar li a:hover {
    color:#3498DB;
    outline: 0;
    background-color: #fff;
    border:1px #3498DB solid;
}

.link_activate {
    color:#3498DB;
    outline: 0;
    background-color: #fff;
    border:1px #3498DB solid;
}

这是小提琴：https://jsfiddle.net/e13msz7f/1/

Answer 1

以下是我制作的示例代码，可用于在颜色和背景颜色之间切换。

$("li").on("mouseover", function() {
		$link = $(this).css("color");
		$backgoundColor = $(this).css("background-color");
		$(this).css("color", $backgoundColor);
		$(this).css("background-color", $link);
}).on("mouseout", function() {
   $link = $(this).css("color");
		$backgoundColor = $(this).css("background-color");
		$(this).css("color", $backgoundColor);
		$(this).css("background-color", $link);
});

li
{
  list-style-type:none;
  margin:20px 0;
  float:left;
  cursor:pointer;
}

.navbar-sidebar li a
{
	color:#fff;
	border:1px #3498DB solid;
  padding:5px;
  background-color: #3498DB;
}

.navbar-sidebar li a:hover
{
	color:#3498DB;
	outline: 0;
    background-color: #fff;
    border:1px #3498DB solid;
}

.link_activate
{
	color:#3498DB;
	outline: 0;
    background-color: #fff;
    border:1px #3498DB solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="setup_list" class="nav navbar-sidebar">
				
				<li><a href="">Cus</a></li>
				<li><a href="">Com</a></li>
				<li><a href="">Temp</a></li>
</ul>

如何在悬停和活动链接应该是背景颜色（交替）时更改链接的颜色？

1 个答案: