Bootstrap 如何在jquery中将d-none类更改为d-block？

i5desfxk 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(3)|浏览(233)

我会显示和隐藏编辑按钮时，悬停在一个div。像WordPress的。
如果鼠标悬停在div中，如何显示div？我正在尝试这样做，但出现了一些问题，什么也没有显示。

<div class="row d-flex align-items-center" id="company">
    <div class="col-lg-6 mb-4">
        <div class="p-5">
            <h1>Company</h1>
            <p class="text-justify">Description</p>
            <a href="#" class="btn btn-warning rounded-pill text-danger btn-lg">Start</a>
        </div>
    </div>
    <div class="col-lg-6 mb-4">
        <img src="/images/layer.png" alt="Company" class="img-fluid lazy">
    </div>
    <div class="p-5">
        <div id="menu">
            <div class="btn-group">
                <button type="button" class="btn btn-warning">وEdit</button>
            </div>
        </div>
    </div>
</div

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

wordpress

twitter-bootstrap

来源：https://stackoverflow.com/questions/73153811/how-to-change-d-none-class-to-d-block-in-jquery-on-hover

3条答案

按热度按时间

3phpmpom1#

你不需要Javascript就可以完成这一切。你可以在CSS中完成这一切。下面的第一个规则默认隐藏菜单。第二个规则覆盖第一个规则，当你悬停在#company div上时显示菜单。

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

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

如果要使用Javascript/jQuery执行此操作，则必须为mouseenter和mouseleave事件指定单独的操作，以确保相应地显示/隐藏菜单：

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

如果您要纯粹使用Bootstrap类别，而不是直接操作CSS样式规则：

$("#company").hover(
  function() {
   $("#menu").addClass('d-block').removeClass('d-none');
  },
  function() {
   $("#menu").addClass('d-none').removeClass('d-block');
  },
);

赞(0）回复(0）举报 2022-12-08

vsnjm48y2#

嗨，你的代码几乎是正确的。在你的Jquery部分，你必须使用addClass（）而不是css（），因为你试图改变元素的类名。试试这个。希望它能工作

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

赞(0）回复(0）举报 2022-12-08

r6vfmomb3#

默认情况下css可以添加到“菜单”id

#menu {
  display: none;
}

使用js：

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

赞(0）回复(0）举报 2022-12-08

我来回答

Bootstrap 如何在jquery中将d-none类更改为d-block？

3条答案

相关问题

热门标签

最新问答