[英]Make div visible when hover
so I'm trying to make an X button appear and disapear when mouse over on it. 因此,我尝试将X按钮显示在鼠标悬停时消失。 Iv'e tried alot of threads over stackoverflow and did not get an answer.
我在stackoverflow上尝试了很多线程,但没有得到答案。
let closeX = document.createElement("button"); closeX.className = "xBtn";
.xBtn { display: none; width: 23px; height: 23px; background-image: url(img/xIcon.png); background-size: 100%; position: relative; top: -183px; right: -154px; } .xBtn:hover .xBtn { display: block; }
<button class="xBtn"> Click </button>
So correcly what this code does is just not showing the button even when the mouser is over it. 因此,正确的做法是,即使将鼠标移到该按钮上,该代码也不会显示该按钮。 my goal is that the button will be showen everytime the mouse is on it.
我的目标是每次鼠标在按钮上都会显示该按钮。
You can set the color of the button to opacity 0 with rgb(0,0,0,0)
or opacity: 0
and on hover set the original color/opacity, This is the only way I can think of doing it. 您可以使用
rgb(0,0,0,0)
或opacity: 0
将按钮的颜色设置为不透明度0,并在悬停时设置原始颜色/不透明度,这是我想到的唯一方法。 Beacuse if you set display: none
or visibility: hidden
hover wont trigger 因为您设置了
display: none
或visibility: hidden
悬停不会触发
button{ color: rgb(0,0,0,0); background-color: rgb(0,0,0,0); border-color: rgb(0,0,0,0); /*or*/ opacity: 0; } button:hover{ border-color: buttonface; color: buttontext; background-color: buttonface; /*or*/ opacity: 1; }
-><button>Hello!</button><-
If your element is set to display:none
it will act as if it is not on the page - so no mouseover will be triggered. 如果您的元素设置为
display:none
则它的作用就好像它不在页面上一样-因此不会触发任何鼠标悬停。 You could work with opacity, which would allow for a nice fade in animation, or with the visibility property instead. 您可以使用不透明性,这样可以使动画呈现出很好的淡入淡出效果,或者使用visible属性。
Also, the selector .xBtn:hover .xBtn
would only match elements with the .xBtn
-class WITHIN an element that is hovered with the same class. 同样,选择器
.xBtn:hover .xBtn
仅将.xBtn
-class元素与在同一类中徘徊的元素匹配。 You want to change this to .xBtn:hover { ... }
only. 您只想将其更改为
.xBtn:hover { ... }
。
An example to fade in the button on hover would look like this: 淡入悬停按钮的示例如下所示:
.xBtn{ opacity: 0; transition: opacity 0.5s; } .xBtn:hover { opacity: 1; }
Hovere there -> <button class="xBtn"> My button </button>
The hover
css property has no effect on display:none
element, you can use opacity
instead. hover
css属性对display:none
元素无效,您可以改用opacity
。 Also you have to append the button in the DOM. 另外,您还必须将按钮添加到DOM中。
let closeX = document.createElement("button"); closeX.textContent = 'Save'; closeX.className = "xBtn"; document.body.append(closeX);
.xBtn{ opacity: 0; width: 23px; height: 23px; background-image: url(img/xIcon.png); background-size: 100%; position: relative; --top: -183px; --right: -154px; } .xBtn:hover{ opacity: 1; }
Once the display is none you can't go over it. 一旦无显示,您将无法浏览。 Cause in display none it's like if it doesn't really exist in the page Change it from
display:none
and display:block
to visibility: hidden
and visibility: visible
导致显示无,就像页面中实际上不存在那样。将其从
display:none
和display:block
更改为visibility: hidden
和visibility: visible
if you want to do it the javascript
way you can use an event of mouseover
that toggle a class hide
with an opacity of 0 如果要使用
javascript
方法,可以使用mouseover
事件来切换不透明度为0的class hide
let closeX = document.createElement("input"); closeX.setAttribute("type", "button"); closeX.setAttribute("value", "button"); document.body.appendChild(closeX); closeX.addEventListener("mouseover", function() { this.classList.toggle("hide"); });
.hide { opacity: 0; }
The below code must work 下面的代码必须工作
.xBtn {
opacity: 0;
width: 23px;
height: 23px;
background-image: url(img/xIcon.png);
position: relative;
}
.xBtn:hover {
opacity: 1;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.