javascript - 通过按钮调用函数后悬停效果消失

Question

我有以下代码，但它的工作方式并不符合我的意愿:

HTML:

  <div class="horizontal-ribbon">
    <div class="list" id="pseudoCheckBoxes">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</div>
<input type="button" id="but" value="next" onclick="check()">

CSS:

.horizontal-ribbon {
    padding: 8px 8px 8px 8px;
    background: #d6dbdf;
}
.list {
    position:relative;
}
.list ul {
    display:inline-block;
    background:#d6dbdf;
    margin:0;
    padding:0;
    border-radius:0px;
    color:#ffffff;
}
.list ul li {
    cursor: pointer;
    cursor: hand;
    display:inline-block;
    vertical-align:middle;
    border-radius: 50%;
    width:14px;
    height:14px;
    padding:0px;
    background:#fff;
    border: 5px solid #d6dbdf;
    color: #ffffff;
    text-align:center;
    font: 700 13px"Lato", Helvetica, Arial sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background 0.2s ease-out, border-color 0.2s ease-out;
    transition: background 0.2s ease-out, border-color 0.2s ease-out;
}
.list ul li:first-child {
    margin-left: 20px;
}
.list ul li:last-child {
    margin-right: 20px;
}
.list ul li:hover {
    background:#1abc9c;
    border-color:#1abc9c;
}

JavaScript:

  function check() {
    element = document.getElementById("pseudoCheckBoxes");
    items = element.getElementsByTagName("LI");
    items[0].style.backgroundColor = "#1abc9c";
    items[0].style.borderColor = "#1abc9c";
    setTimeout(function () {
        uncheck()
    }, 2000);
}

function uncheck() {
    element = document.getElementById("pseudoCheckBoxes");
    items = element.getElementsByTagName("LI");
    items[0].style.backgroundColor = "white";
    items[0].style.borderColor = "#d6dbdf";
}

我希望通过按下按钮和将鼠标悬停在 <li> 上来控制这种效果元素。

悬停效果很好，但我点击下一个按钮后，悬停效果消失了，我不知道为什么。请善待并帮助我 ( http://jsfiddle.net/xfpyM/ )。

Answer 1

您正在使用 CSS 悬停应用 :hover 效果，并在单击 next 按钮后添加内联样式。

你可以尝试通过添加类来实现。

这是 demo

JS

function check(){
element=document.getElementById("pseudoCheckBoxes");
items=element.getElementsByTagName("LI");
items[0].className ="active";
setTimeout(function(){uncheck()}, 2000);
}
function uncheck(){
element=document.getElementById("pseudoCheckBoxes");
items=element.getElementsByTagName("LI");
items[0].className=" ";

}

CSS

.list ul li.active,
.list ul li:hover{
background:#1abc9c;
border-color:#1abc9c;
}