如何使 html 元素消失？ [复制]答案

【问题标题】：How can I make an html element disappear? [duplicate]如何使 html 元素消失？ [复制]
【发布时间】：2018-12-12 15:44:41
【问题描述】：

我在一个有菜单栏的网站上工作，当我将鼠标悬停在一个元素上时，列表会出现，

例如，当用户将鼠标悬停在“标题”上时，将显示“cbp-hrsub”部分，

我想要如果用户从“cbp-hrsub”部分悬停，该部分将在此时关闭。

这是 HTML 代码

<div class="main">
        <nav id="cbp-hrmenu" class="cbp-hrmenu">
            <ul>
                <li>
                    <a href="#" >header</a>
                    <div class="cbp-hrsub">
                        <div class="cbp-hrsub-inner"> 
                            <div id="menu-list">
                                 <h4>Section One</h4>
                                <ul>
                                    <li><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li><a href="#">6</a></li>
                                    <li><a href="#">7</a></li>
                                </ul>
                            </div>
                            <div id="menu-list">
                                    <h4>Section 2</h4>
                                <ul>
                                    <li><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li><a href="#">6</a></li>
                                </ul>
                            </div>
                            <div id="menu-photo">
                                 <h4>The Image</h4>
                                 <ul>
                                        <li>
                                        <img src="themes/images/img.png" alt=""> 
                                    </li>
                                 </ul>
                            </div>
                        </div><!-- /cbp-hrsub-inner -->
                    </div><!-- /cbp-hrsub -->
                </li>
           </ul>
        </nav>
    </div>

这是 javascrypt "jQuery" 代码

var cbpHorizontalMenu = (function() {

    var $listItems = $( '#cbp-hrmenu > ul > li' ),
        $menuItems = $listItems.children( 'a' ),
        $body = $( 'body' ),
        current = -1;

    function init() {
        $menuItems.on( 'hover', open );
        $listItems.on( 'click', function( event ) { event.stopPropagation(); } );
    }

    function open( event ) {

        if( current !== -1 ) {
            $listItems.eq( current ).removeClass( 'cbp-hropen' );
        }

        var $item = $( event.currentTarget ).parent( 'li' ),
            idx = $item.index();

        if( current === idx && event == 'click') {
            $item.removeClass( 'cbp-hropen' );
            current = -1;
        }
        else {
            $item.addClass( 'cbp-hropen' );
            current = idx;
            $body.off( 'click' ).on( 'click', close );
        }

        return false;
    }



    function close( event ) {
        $listItems.eq( current ).removeClass( 'cbp-hropen' );
        current = -1;
    }

    return { init : init };

})();

我想添加功能如果用户从“cbp-hrsub”部分悬停它会关闭

任何人都可以在这个问题上帮助我。

【问题讨论】：

你能分享一下css的最小数量吗，因为我无法在js fidlle或堆栈溢出sn-p编辑器上重现问题
@ahmed，如果此问题的某些内容在副本中未涵盖（或许多类似内容），请修改以使其更清楚，我们可以考虑重新打开该问题。

标签： javascript jquery html css

【解决方案1】：

将您想要悬停的元素和应该显示在标签中的元素 (#new_tag)。然后使用以下方法：

$('#new_tag').on('mouseenter', function() {

      // your function to show content           

}).on('mouseleave', function(){

     // your function to show content 

});

【讨论】：

【解决方案2】：

您可以使用 CSS 制作您需要的内容，无需编写脚本

首先你需要隐藏悬停时打开的子菜单

.cbp-hrsub {
  display: none;
}

当您将鼠标悬停在标题上时，将其显示更改为阻止

#header:hover + .cbp-hrsub {
  display: block;
}

仅此而已检查 plunker 中的工作代码
https://plnkr.co/edit/zPzFYoBtjJS1GNYHEU49?p=preview

【讨论】：