点击后jQuery悬停效果不起作用

Question

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

什么是错的？

var lastclick = 0; 
 
function clicked(x) 
 
{ 
 
\t if(lastclick!=0) $("#button")[lastclick-1].mouseleave(); 
 
\t $("#button")[x-1].mouseenter(); 
 
\t 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>