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>

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

1 个答案: