How to make a div disappear on hover without it fl

2楼-- · 2019-02-21 16:45

display:none will take the element out of the render tree, so it loses :hover state immediately, then reappears and gets :hover again, disappears, reappears, etc...

What you need is:

#elem { opacity:0; filter:alpha(opacity=0); }

It will leave the place empty, so no flickering will appear. (Demo or yours updated)

0人赞添加讨论(0) 举报

虎瘦雄心在

3楼-- · 2019-02-21 16:45

If you have something like this:

div:hover
{
  display:none;
}

Then there is no way for you to avoid flickering. On :hover the element becomes invisible so it is not hovered anymore and it appears again. As soon as it appears it is getting :hover again and ...

On :hover the element becomes invisible so it is not hovered anymore and it appears again. As soon as it appears it is getting :hover again and ...

... It flickers to be short. A better option would be to use opacity, something like this:

div:hover
{
  opacity:0;
}

0人赞添加讨论(0) 举报

聊天终结者

4楼-- · 2019-02-21 16:52

Use javascript to set a class (eg. invisible) on the object when hovered over. Then use css to display:none when the object has that invisible class. Since it doesn't exist anymore you will have to check mouse coordinates (or use another element mouse hover event) to remove the class and reset the invisible class.

0人赞添加讨论(0) 举报

混吃等死

5楼-- · 2019-02-21 16:55

Optionally with CSS3, but will only work on latest browsers (excluding IE). Edit: Here is an example @ jsfiddle using both jquery and CSS3.

<html>
<head>
    <title>CSS3 hover</title>
<style type="text/css">
#hover{
     width:100px;
     height:100px;
     background-color:#000000;
    -webkit-transition:opacity 0.2s ease;
    -moz-transition:opacity 0.2s ease;
    -o-transition:opacity 0.2s ease;
}
#hover:hover{
    // Red(0-255), Blue(0-255), Green(0-255), Alpha (0-1)
    background-color:rgba(100,100,100,0); 
    opacity:0;
}
</style>
</head>
<body>
    <div id="hover"></div>
</body>
</html>

0人赞添加讨论(0) 举报

How to make a div disappear on hover without it fl

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间