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;
}

Answer 2

您的uncheck函数有一些错误。您不是要删除样式属性，而是添加不同的样式。所以实际的悬停风格没有应用。

而不是这个

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

像这样使用。

function uncheck() {
element = document.getElementById("pseudoCheckBoxes");
items = element.getElementsByTagName("LI");
items[0].removeAttribute("style");
}

DEMO

通过按钮调用功能后，悬停效果消失

2 个答案: