How to change d-none class to d-block in jquery on hover?-CodePudding

I would show and hide a button on edit when hovering a div. Like WordPress.

How to display a div inside a div if hovered? I'm trying to do this but there's something wrong, nothing appears.

<div  id="company">
    <div >
        <div >
            <h1>Company</h1>
            <p >Description</p>
            <a href="#" >Start</a>
        </div>
    </div>
    <div >
        <img src="/images/layer.png" alt="Company" >
    </div>
    <div >
        <div id="menu">
            <div >
                <button type="button" >وEdit</button>
            </div>
        </div>
    </div>
</div

<script>
    $("#company").hover(function(){
        $("#menu").css("d-none", "d-block");
    });
</script>

wordpress

CodePudding user response：

You don't need Javascript for this. You can do it all in CSS. The first rule below defaults to hiding the menu. The second rule overrides the first rule to show the menu when you hover over the #company div.

#menu {
  display: none; /* Default */
}

#company:hover #menu {
  display: block;
}

CodePudding user response：

Hi your code is almost correct.In your Jquery part you have to use addClass() instead of css() because you are trying to change the class name of the element.Just try this one.Hope this works

     <script>
        $("#company").hover(function () {
          $("#menu").addClass("d-none");
        });
    </script>

CodePudding user response：

By default the css can be added to the "menu" id

#menu {
  display: none;
}

using js:

$("#company").hover(function () {
   $("#menu").css("display", "block");
});