无法在鼠标输出时删除类

Question

我的逻辑很简单。我想做的是，当我onmouseover over按钮1，它显示我彩色的正方形，但当我onmouseout它消失了，但我不能得到消失部分的工作，我不知道什么是错的。

function screen(){
let btn= document.getElementsByTagName("button");
let p = document.createElement('p');

btn[0].appendChild(p);
if (btn[0].onmouseout){
btn[0].removeChild(p);
}    
}

body{
background-color: lightgrey;
}

.btn__div{
display: flex;
flex-direction: column;
gap: 2em;
margin-top: 2em;
width: 40%;
margin: 0 auto;
}

p{
background: yellow;
height: 200px;
width: 200px;
position:absolute;
top: 0;
left: 0;

}

<header>

<div class="btn__div">
<button onmouseover='screen()'>CLICK ME</button>
<button>CLICK ME 2</button>
<button>CLICK ME 3</button>


<script src="index.js"></script>

e消失部分工作

Answer 1

你需要绑定一个事件，而不是检查它是否为真

function screen(){
let btn= document.getElementsByTagName("button")[0];
let p = document.createElement('p');
p.textContent = 'foo';

btn.appendChild(p);
function removeIt(){
btn.removeChild(p);
btn.removeEventListener("mouseout", removeIt);
}
btn.addEventListener("mouseout", removeIt);

}

body{
background-color: lightgrey;
}

.btn__div{
display: flex;
flex-direction: column;
gap: 2em;
margin-top: 2em;
width: 40%;
margin: 0 auto;
}

p{
background: yellow;
height: 200px;
width: 200px;
position:absolute;
top: 0;
left: 0;

}

<header>

<div class="btn__div">
<button onmouseover='screen()'>CLICK ME</button>
<button>CLICK ME 2</button>
<button>CLICK ME 3</button>


<script src="index.js"></script>

Answer 2

您可以创建第二个函数，负责删除元素<p>:

function screenRemove() {
let p = btn.getElementsByTagName("p")[0];
btn.removeChild(p);
}

另外，请注意您引用的<p>标签从btn开始。:

let p = btn.getElementsByTagName("p")[0];

这将使你在引用这个标签时更加精确。

并指定eventonmouseout本身在按钮标签内。这样的:

<button onmouseover="screenCreate();" onmouseout="screenRemove();">CLICK ME</button>

完整代码:

let btn = document.getElementsByTagName("button")[0];
function screenCreate() {
let p = document.createElement("p");
btn.appendChild(p);
}
function screenRemove() {
let p = btn.getElementsByTagName("p")[0];
btn.removeChild(p);
}

body {
background-color: lightgrey;
}
.btn__div {
display: flex;
flex-direction: column;
gap: 2em;
margin-top: 2em;
width: 40%;
margin: 0 auto;
}
p {
background: yellow;
height: 200px;
width: 200px;
position: absolute;
top: 0;
left: 0;
}

<div class="btn__div">
<button onmouseover="screenCreate();" onmouseout="screenRemove();">CLICK ME</button>
<button>CLICK ME 2</button>
<button>CLICK ME 3</button>
</div>