Question

我在CSS中使用btn-block btn-sm处于固定位置的bootstrap中有一个基本的position:sticky; top:10px按钮。问题是，按钮没有显示任何悬停效果，当光标位于按钮的上半部分时，您无法单击它。此外，对于稍微但在按钮下方，您可以将鼠标悬停在按钮上，按钮显示悬停效果，当您单击它时，会注册按钮click事件。它看起来像＆＃34;可点击＆＃34;按钮的一部分偏移约10px。

我的其他按钮（发送按钮）似乎没有此问题，因此它看起来与该按钮的position sticky样式有关。

似乎没有人提出任何与此类似的问题，因此我甚至不知道如何开始尝试寻找解决方案。

我的一些代码：

＆＃13;

#latest-msg {
    position: sticky;
    top: 10px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card" id="chat-wrapper">
    <div class="card-header text-left" id="chat-title">
        Chat
    </div>
    <div class="card-body" id="chat-messages">
        <button type="button" class="btn btn-primary btn-block btn-sm" id="latest-msg">Latest Message</button>
        <!--^^^THIS BUTTON-->

        <p id="no-msg" class="text-muted">No Messages Yet. Be the first!</p>
        <!--Some text is appended here via javascript.-->
    </div>
    <div class="card-footer text-muted text-right hidden " id="footer-send">
        <label for="name">Name:</label>
        <input class="form-control" placeholder="Message..." id="name">

        <button class="btn btn-primary btn-block" id="name-enter">Send</button>
    </div>
    <div class="card-footer text-muted text-right" id="footer-name">
        <textarea class="form-control" placeholder="Message..." id="chat-msg-box"></textarea>

        <button class="btn btn-primary btn-block" id="msg-send">Send</button>
    </div>
</div>

＆＃13;

Answer 1

将此项添加到javascript文件中会显示该按钮已被点击。

您也可以在此处查看：https://codepen.io/anon/pen/bazLvp

document.getElementById('latest-msg').addEventListener('click', buttonClicked);

function buttonClicked() {
  console.log('the button was clicked');
}

无法点击引导按钮

1 个答案: