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

Hover effect disappear after calling function through button

本文关键字：悬停 消失 函数 按钮 调用      更新时间：2023-09-26

我有以下代码只工作，而不是我想要的:

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/)。

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

你可以试着添加class。

下面是演示

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

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

而不是

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

相关文章：