Question

我有这个简单的jsfiddle示例：https://jsfiddle.net/fLp74gnu/ 如示例所示，onlclick函数显示/隐藏download-icon元素。如何在点击和隐藏时显示悬停？

var divs = document.getElementsByTagName("div");
var parents = document.getElementsByClassName("main-cell");
for (var i = 0; i < parents.length; i++) {
    parents[i].onclick = function () {
        toggleChildren(this);
    };
}

function toggleChildren(elem) {
    for (var i = 0; i < divs.length; i++) {
        if (divs[i] == elem) {
            for (var ii = 1; ii <= 5; ii++) {
                if (divs[i + ii].style.display == "none") {
                    divs[i + ii].style.display = "block";
                } else {
                    divs[i + ii].style.display = "none";
                }
            }
        }
    }
}

.main-cell {
    background: #bbb;
    width: 200px;
    height: 130px;
    border-radius: 7%;
}
.main-cell:hover {
    background: #999;
}
.download-icon {
    background: rgba(0, 0, 0, .8);
    width: 100%;
    height: 100%;
    border-radius: 7%;
    display: none;
}

<div class="main-cell">
    <div class="download-icon"></div>
</div>

Answer 1

这很容易。

.main-cell {
    background:transparent;/*set to transparent so the user can't see it but the element will still have height and width*/
    width: 200px;
    height: 130px;
    border-radius: 7%;
}
.main-cell:hover {
    background: #999;/*the element is visible but when the user hovers over it it will take a color and reappear*/
}

Answer 2

你的意思是： jsfiddle

＆＃13;

var divs = document.getElementsByTagName("div");   
var parents = document.getElementsByClassName("main-cell");
for (var i=0; i<parents.length; i++) {
    parents[i].onclick = function() { toggleChildren(this); console.log(this);};
    parents[i].onmouseleave = function(){
        this.removeChild(document.getElementById('DELETEME'));
    };
}
function toggleChildren(elem) {
    for (var i=0; i<divs.length;i++) {
        if (divs[i] == elem) {
            for (var ii=1; ii<=5; ii++) {
                if (divs[i+ii].style.display == "none") {
                    divs[i+ii].style.display = "block";
                } else {
                    divs[i+ii].style.display = "none";
                }
            }
        }
    }
}

＆＃13;

.main-cell {
  background: #bbb;
  width: 200px;
  height: 130px;
  border-radius: 7%;
}
.main-cell:hover {
  background: #999;
}
.download-icon {
  background: rgba(0,0,0,.8);
  width: 100%;
  height: 100%;
  border-radius: 7%;
  display: none;
}

＆＃13;

<div class="main-cell"><div ID="DELETEME" class="download-icon"></div></div>

＆＃13;

这是行为吗？（可能你只想删除课程？）

编辑：

parents[i].onmouseleave = function(){
        var el = this.getElementsByTagName('div');
        el[0].classList.remove('download-icon');
    };
    parents[i].onmouseover = function(){
        var el = this.getElementsByTagName('div');
        el[0].classList.add('download-icon');
        // el[0].style.display = "none"; if you want ed to appear in that way
    };

通过这种方式，您不会删除元素，而是删除类。（并再次添加）。

.onClick javascript函数 - 在鼠标悬停时隐藏

2 个答案: