javascript - 使用 "onmouseover"在 JavaScript 中显示工具提示-6ren

javascript - 使用 "onmouseover"在 JavaScript 中显示工具提示

转载作者：太空狗更新时间：2023-10-29 14:03:28

24

4

我正在尝试使用 JavaScript 创建小对话框，当用户将鼠标悬停在它们上方时，这些对话框将建议用户如何将数据输入到字段中。我对使用 JavaScript 非常陌生，所以我可能会以完全错误的方式解决这个问题。

下面是我的代码:

<html>
    <head>
        <style type="text/css">
            #button {
                border-radius: 50%;
                border: 1px solid black;
                padding-top: 3px;
                padding-bottom: 3px;
            }
            #info {
                margin-left: 5%;
            }
            #help_container {
                border: 0.5px solid black;
                background-color: #efefef;
                width: 20%;
            }
            #close {
                float: right;
                margin-top: 1%;
                background-color: #efefef;
                border: 0px solid #efefef;
            }
            #help_text {
                margin: 5%;
                font-family: Arial;
                font-size: 15px;
            }
        </style>
    </head>
    <body>
        <div>
            <button id="button" onmouseover="mOver(this)" onmouseout="mOut(this)">?</button>
        </div>

        <script>
            function mOver(obj) {
                obj.innerHTML = "<div id='help_container'><button id='close'>X</button><p id='help_text'>Help Text</p></div>";
            }

            function mOut(obj) {
                obj.innerHTML = "<button id='button' onmouseover='mOver(this)' onmouseout='mOut(this)'>?</button>";
            }
        </script>
    </body>
</html>

但是该功能不起作用，将鼠标悬停在 button 标记上并远离它时确实会发生变化，但不是我预期的变化。我希望一个小的 div 会出现，里面写有帮助文本。理想情况下，我还希望在 div 中出现一个关闭按钮，它可以调用函数 onclick 并删除 div 但我不确定如何使用 onlick 方法删除元素。

任何有关如何解决 onmouseover 函数或如何实现使用 onlick 关闭 div 的方法的帮助将不胜感激。

提前致谢

最佳答案

您可以将 Bootstrap 或任何其他 JavaScript 库与 jQuery 一起用于相同的目的。最好使用它们。

请看下面的代码。

HTML

<a data-toggle="tooltip" title="add to cart">
    <i class="icon-shopping-cart"></i>
</a>

JavaScript 和 CSS

$('a[data-toggle="tooltip"]').tooltip({
    animated: 'fade',
    placement: 'bottom',
});

.cart {
    overflow: hidden;
    padding: 10px 3px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>

<div class="cart"> 
    <a data-toggle="tooltip" title="add to cart">
        <i class="icon-shopping-cart"> Cart</i>
    </a>
</div>

关于javascript - 使用 "onmouseover"在 JavaScript 中显示工具提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22784677/

24

4

0

文章推荐： git 保持多个远程服务器与所有分支同步

文章推荐： Github 更新存储库

文章推荐： git - BitBucket 推送功能分支模型

文章推荐： javascript:获取伪高度:元素之前

javascript - 如何让 onmouseover 交换事件保持到 onmouseout 直到下一个 onmouseover 事件？
有人可以帮我让 onmoseover 事件保持显示: block 吗？行为，直到我将鼠标悬停在不同的事件上？换句话说，我想保持一个事件可见，直到我将鼠标悬停在另一个事件上。我填写的答案很简单。我刚接触
javascript - onmouseover ="this.style... is working but I need something like onmouseover="this.child.child
应该很容易，但我无法让它工作。如标题中所述，我想将 onmouseover 的背景颜色从 span.name(橙色)更改为 T E S T 我找到了这个但是
Uncaught TypeError: Cannot set property 'onmouseover' of null(未捕获的TypeError：无法将属性“onmouseover”设置为null)
我一直致力于在Java脚本中创建一种摆动效果，这样当鼠标移动到一些对象上时，它们会慢慢地保持悬停，直到它们停止。。我已经在JSFdle中实现了这一点：http://jsfiddle.net/z3s7v
javascript - 为什么 onmouseover 和 onclick 不能一起设置 div 样式以及如何重置 onclick 设置样式而不丢失 onmouseover 的样式？
首先，我必须说我处于非常基础的编程水平。这些问题的答案对某些人来说可能非常明显，但我就是想不出一种方法将所有这些放在一起。提前致谢。我有这个 HTML 代码: Tema 1. Mecá
javascript - 在表格单元格上设置 onmouseover
在第二个(右/bing)表条目中，我理解为什么从图像悬停到“bing”字符串可能会导致 bingfn()被解雇。但是第一个(左/谷歌)表有 onmouseover在，因此我预计从图像悬停到文本并
dart - Dart .onMouseOver
DivElement collectWoodHover = querySelector("#collectWood"); if (collectWoodHover.onMouseOver == tru
javascript - Onmouseover 为不同的图像映射播放不同的音频文件
我正在尝试制作一些东西，当您滚动图像的某个部分时，会使用 onmouseenter 和 onmouseleave 功能播放不同的歌曲。它适用于第一个图像映射，但由于某种原因，它不适用于第二个图像映射，
javascript - onmouseover 不适用于我的功能？
我目前正在学习使用java脚本，遇到了一个我无法解决的问题。为了练习，我在一个简单的 HTM 中编写了一个修改 div 上边距的脚本: var boton = (function () { var t
javascript - 类更改不会影响 onmouseover
我正在使用 jQuery 1.7.2，我想做的是在一个 div 上触发 onmouseover (使用类 active)，但在 onmouseout 上触发将该类更改为 inactive，并将第二个
javascript - onmouseover 函数自动运行参数
页面加载后，如果您检查控制台，您会看到该函数在我将鼠标悬停在元素上之前触发。如果我删除参数，则页面会等待我将鼠标悬停在元素上，但我会失去动态功能。我在传递元素时做错了什么吗？ var myList =
javascript - 如何在特定时间后激活 onmouseover？
如何定义 onmouseover 函数的特定持续时间？例如，在元素悬停 500 毫秒后，onmouseover 开始运行(因此，如果用户停留时间不超过 500 毫秒，onmouseover 不会运行
jquery onmouseover 效果不起作用
我尝试做这样的事情: 当我将鼠标悬停在按钮上时，文本应该消失，当我鼠标移开时，文本应该再次显示.. 这是我的样本jsfiddle Request
javascript onmouseover 激活的计时器应该只倒计时一次
我的计时器是通过 onmouseover 函数激活的。我的 CSS 动画在 15 秒后完成，但我的计时器没有完成。每次鼠标悬停后，时间都会重新激活，而不是按时间倒计时。 Hover this tex
javascript - onmouseover 工具提示未正确显示
我正在使用 angularjs和谷歌柱形图以图表形式显示数据。当数据更多时，我显示带有水平滚动条的图表。滚动条打开时工具提示出现问题。请查找演示 here . 当鼠标悬停在条形图上时，它会在工具提示
javascript - 图像放大 onmouseover
我需要一个脚本，它将应用于围绕一个圆圈的一组图像.. 现在通过脚本需要的是在圆圈周围的鼠标悬停图像上应该放大并移动到中心。如何使用 Javascript 和 CSS 做到这一点。请具体说说CSS
javascript - onmouseover 显示添加购物车按钮和折扣图像
我正在使用 PHP 创建在线购物网站。我正在使用 Bootstrap 来设计我的网站。我的问题是鼠标悬停显示添加购物车按钮和折扣图片。这是我的代码 .jpg" alt="produc
Javascript onmouseover 背景图像更改
我正在尝试将此背景更改器从编辑后删除实现到我的个人博客，该博客仅驻留在我的计算机上(未上传到互联网)，但我不知道 js 是什么因为它是？我将如何将它添加到我的博客中？我知道有: 在 html 文
javascript - onmouseover 停止幻灯片帮助
这是一个幻灯片功能，鼠标悬停我想让它停止。它没有在鼠标悬停时停止幻灯片放映，而是加快了速度？？我如何更正此问题以停止鼠标悬停？ function nextslide() { // Hide
下拉菜单的 JavaScript onmouseover
是否可以使用 JavaScript 在每个选择的下拉菜单上添加悬停消息？我会使用类似 document.getElementById('name_of_html_id') 的东西，然后是四个选项之一
JavaScript 函数未定义错误 onmouseover
我正在尝试将段落堆叠在一起。当我将鼠标悬停时，我希望显示该特定段落。但是我收到错误: 未捕获的 ReferenceError:分配中的左侧无效 JS: var topLayer = "p3"; fun

首页

博学

6Ren·AI

商城