单击按钮时激活按钮的悬停状态，直到单击另一个按钮 (Javascript/JQuery)

Question

我目前正在为我的自由职业创建一个网站，并且正在使用 JQuery 提供的 click() 和 load() 函数。一切正常，我一如既往地通过 classname:hover 在 css 中添加了悬停效果。

我现在想做的是让一个被点击的按钮在另一个按钮被点击时一直保持悬停效果。我看到了几篇关于 add 功能的帖子，但就是无法让它发挥作用。我希望这里有人能够并且愿意帮助我！

这是我的代码：

HTML

<div class="button" id="buttonHome">HOME</div>

JS:

<script type="text/javascript">
    $(document).ready(function(){
        $('#buttonHome').click(function(){
            $("#content").load("includes/sample.html");
            $('button').addClass('hover');
        });
    })
</script>

CSS:

.button{
    width: auto;
    height: 22px;
    float: left;
    cursor: pointer;
} .button:hover, .button.hover{border-bottom: thin solid #ffffff;color: #c4c4c4;}

如果还需要什么，尽管告诉我！ :)

Answer 1

您的元素是 <div>，而不是 <button>，尽管它有 class 按钮，所以我认为您的意思是：

$(".button").addClass("hover");

在 jQuery 中，您使用在 CSS 中使用的相同选择器来定位元素，因此 $("button") 定位 <button> 元素，而 $(".button") 定位带有按钮 class.

的任何元素

JSFiddle

Answer 2

假设按钮是

<div class="button">HOME</div>
<div class="button">ABOUT</div>
<div class="button">Contact</div>

现在是脚本部分

<script>
  $(function() {

    $('.button').click(function() {
       $('.button').removeClass('active');
       var el = $(this);
       el.addClass('active');
    })


  })
</script>

现在 css 部分

<style>
  .active {
    background: yellow;
}
</style>

单击按钮时激活按钮的悬停状态，直到单击另一个按钮 (Javascript/JQuery)

Activating the hover state of a button when it's clicked until another button is clicked (Javascript/JQuery)

html

javascript

css

jquery

hover