Question

当我将鼠标悬停在按钮上时，我想显示一个文本描述框，当不悬停时将其关闭。目前，当我的按钮悬停时，将显示文本框，但是我需要单击屏幕将其关闭。当我尝试使用几个按钮来显示不同的消息框时，所有模式都被打开，并且我需要多次单击屏幕以将其关闭。当鼠标没有悬停时，如何在悬停时显示消息框并取消显示。多个按钮如何实现？

以下是我到目前为止的内容：

$(document).ready(function () {
    "use strict";
    $("#test1").hover(
        function () {
            $('.modal').modal({
                show: true
            });
        },
        function () {
            $('.modal').modal('hide');
        });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



<button class="btn login btn-primary" data-toggle="modal" data-target="#product1" id="test1">Test</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      This text box shown when mouse hover over the button
    </div>
  </div>
</div>

Answer 1

第一个主要问题：当引导程序显示此模式时，它将覆盖网页上的所有内容，包括“测试”按钮，这使其超出mouseOut的范围（模式对话框的底部位于该按钮上方）

这可以通过以下方法解决：通过放置较大的z索引css来对显示层的顺序进行出价（我放置了8000，这也仅在元素使用定位时有效）结果，这不再是真正的模式对话框，并且可以触发对“测试”按钮的单击，这与使用模式对话框的精神相反。

有关该主题的BS4文档=> https://getbootstrap.com/docs/4.0/components/modal/#via-data-attributes

$(document).ready(function () {
  "use strict";
  
  $(".BtModals").hover(
    function () {
      let refID = '#' + $(this).data('modal_id');
      $(refID).modal('show');
    },
    function () {
      let refID = '#' + $(this).data('modal_id');
      $(refID).modal('hide');
    });
});

.BtModals:hover {
  position:relative;
  z-index: 8000;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
  integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>

 <button class="btn login btn-primary BtModals" data-modal_id="Modal-t1"  data-toggle="modal" data-target="#product1" >Test 1</button>

  <button class="btn login btn-primary BtModals" data-modal_id="Modal-t2" data-toggle="modal" data-target="#product1" >Test 2</button>


  <div id="Modal-t1" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      This text box shown when mouse hover over the button  Test 1
    </div>
  </div>
</div>

<div id="Modal-t2" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      This text box shown when mouse hover over the button  Test 2
    </div>
  </div>
</div>

Answer 2

新答案：

“悬停” 方法接受第二个参数作为handlerOut。

因此您可以执行以下操作：

df.loc[ df['col2'].isna(),'col2' ] = df[ df['col2'].isna() ]['col3']
df
Out[538]: 
   col1  col2  col3
0     1   5.0    55
1     2   9.0     9
2     3  22.0    22

旧答案：

由于使用了引导程序，因此在这种情况下，可以使用弹出窗口。

https://getbootstrap.com/docs/3.3/javascript/#popovers-examples

$(document).ready(function () {
    "use strict";
    $("#test1").hover(
        function () {
            $('.modal').modal({
                show: true
            });
        },
        function () {
            $('.modal').modal('hide');
        });
});

Answer 3

您可以使用CSS通过在HTML中为每个按钮设置数据属性和“悬停文本”来实现此目的。如果有太多按钮无法手动执行，或者它们动态变化，则可以在JS中循环使用它们，并使用.setAttribute("data-tip", "tip_content")。

以下是HMTL和CSS的示例：

<button data-tip="Show this on hover">My botton</button>

button:hover:after {
    content: attr(data-tip);
    color: red;   
    display: block;
    position: absolute;
    top: 20%;
}

如果您想实时查看它，这里是codepen链接：https://codepen.io/CPC464/pen/KEbJJo

将鼠标悬停在按钮上时如何显示和关闭消息模式

3 个答案: