单击后的 jQuery 悬停效果不起作用

Question

我想在点击我的按钮后有悬停效果。我曾经做过那个 jQuery 元素数组，可能有问题。我的代码在这里，您可以看到它是如何工作的:

怎么了？

var lastclick = 0;
function clicked(x)
{
	if(lastclick!=0) $("#button")[lastclick-1].mouseleave();
	$("#button")[x-1].mouseenter();
	lastclick = x;
}

$(".1").click(function(){clicked(1);});
$(".2").click(function(){clicked(2);});
$(".3").click(function(){clicked(3);});

#button {
    width: 400px;
    height: 50px;
    text-align: center;
    background-color: #ebebeb;
    margin: 20px;
}

#button:hover {
    cursor: pointer;
    background-color: gray;
}

<div id="button" class="1">
1
</div>
<div id="button" class="2">
2
</div>
<div id="button" class="3">
3
</div>

JSFiddle链接

Answer 1

我还是有点不清楚你想要什么。但如果我理解正确的话，就在这里。正如其他人提到的，您不能以数字或某些符号开头 id。其次，id 必须是唯一的，就像两个人一样，没有两个人具有相同的 id。

注意:您不需要 javascript。

.button{
    display: none;
}
.button + label{
    width: 400px;
    height: 50px;
    display: block;
    text-align: center;
    background-color: #ebebeb;
  
    margin: 20px;
    cursor: pointer;
  
    -webkit-transition: background-color 0.25s;
       -moz-transition: background-color 0.25s;
            transition: background-color 0.25s;
}
.button:checked + label{
    
    background-color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="radio" class="button" name="set" id="button1"/>
<label for="button1">1</label>


<input type="radio" class="button" name="set" id="button2"/>
<label for="button2">2</label>


<input type="radio" class="button" name="set" id="button3"/>
<label for="button3">3</label>