如何使用 JQuery/Javascript 更改悬停时 div 的内容

2024-05-09

我正在尝试使用 JQuery 更改将鼠标悬停在 div 上时的内容。我已经看到了有关堆栈溢出的答案,但我似乎无法让它工作。

我试过了

$( "imgDiv" ).mouseover(
    function() {
        $("tdiv").textContent = "hovering";
    }, 
    function() {
        $("tdiv").textContent = 'title';
    }
);

我还将“鼠标悬停”替换为“悬停”。我使用了一个变量和实际的 div 来代替“imgDiv”。

这就是我的代码的样子:

imgDiv = document.getElementById('imgDiv');
tDiv = document.getElementById('titleDiv');


$( "imgDiv" ).mouseover(
			  function() {
			      $("tdiv").textContent = "hovering";
			  }, function() {
			    $("tdiv").textContent = 'title';
			  }
			);
body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}
#imgDiv {
  width: 100px;
  height: 100px;
  background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgDiv">

<div id=titleDiv>title</div>

</div>

你可以使用 jQuery 的.hover()函数与.text()功能做你想做的事。另外,不需要document.getElementById:

$("#imgDiv").hover(
  function() {
    $("#titleDiv").text("hovering");
  },
  function() {
    $("#titleDiv").text('title');
  }
);
body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}

#imgDiv {
  width: 100px;
  height: 100px;
  background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgDiv">
  <div id="titleDiv">title</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 JQuery/Javascript 更改悬停时 div 的内容 的相关文章

  • Moment.js 动态更新时间(以秒为单位)

    我试图显示时钟 that 每秒更新一次 e g 2015 年 1 月 5 日 12 05 01 它似乎对我来说工作得很好 对于相同的代码 并且只有 moment min js 指向v2 11 0 看看代码 来源 MilkyWayJoe va
  • dc lineChart 单击时弹出数据点信息

    我正在尝试检测折线图数据点上的点击 Per this answer dc scatter plot binding onClick event https stackoverflow com a 22772340 1873386 I am
  • 获取输入图像类型选择的图片并加载到图像标签中

    所以 我有一个用于上传 img 文件的输入框 我想要做的是从该数据 或选定的源 中获取数据并将其路由到图像标签的 src 属性中 像这样的东西 http jsfiddle net QC2c4 http jsfiddle net QC2c4
  • 保存下拉列表中的值

    这是我的情况 我有 2 页 一页用于选择值 一页用于编辑与该值关联的数据库相关内容 现在 我对如何将从下拉列表中选择的值保存到 PHP 的变量中一无所知 并且已经进行了相当多的研究 有任何想法吗 HTML
  • Google 地图 Javascript v3 折线点击事件

    我正在尝试显示一张地图 其中有多条路线布置为折线 单击多段线时 我想显示特定于该线的数据 将数据与线关联不是问题 但无论单击哪条线 显示的数据都会与最近绘制的线关联 就好像每条新折线都会覆盖最后一条线一样 我有一个数据库 其中包含 gpx
  • 如何去除html源代码中的空格

    我正在使用 django 和 python 在模板文件中 我有一个下拉列表 如下所示 有用 唯一的问题是源 html 代码之间有很多空白 有什么办法可以去除空白吗 谢谢 for lang ele in video languages all
  • 为什么 Firefox 关闭空 html 标签?

    我注意到在 Firefox 中 当我查看源代码时 它会向空标签项添加结束标签 例如 hr and img src image jpg 在 Firefox 中查看源代码我明白了 hr and img src image jpg 该文档是 HT
  • Firefox 上的 jquery 焦点未设置

    我想将焦点设置到我的文本区域 以下是我的代码 this textInput val show focus 但它不起作用 实际上 当我按下鼠标按钮时 它会出现 但是当我松开鼠标时 它会从文本区域中删除 因此 经过大量搜索后 我发现 setTi
  • iPhone 上的全屏视频播放器是否有“onClose”事件?

    我在网站上使用 html5 视频播放器 当用户开始播放时 播放器进入全屏模式并播放视频 视频结束后 我看到ended事件并通过关闭视频播放器myvideo webkitExitFullScreen 现在 当玩家实际获得时我需要另一个事件cl
  • Intern JS - 如何在链式 Command 方法中使用 Promise.all()?

    我是用 Intern JS 编写测试的新手 并且一直在遵循他们的文档来使用对象接口 https theintern github io intern interface object and 页面对象 https theintern git
  • IE9 中的无效字符 DOM 异常

    以下这段 JS 曾经在 IE8 中工作 现在在 IE9 中失败 document createElement 我收到以下异常 SCRIPT5022 DOM 异常 INVALID CHARACTER ERR 5 上面这段代码是不是不符合标准呢
  • Dojo“正在加载”消息

    我是 Dojo 新手 所以我需要一些帮助 我的一些链接需要一段时间 当用户单击时 页面开始加载需要几秒钟 我想添加一条 正在加载 消息 我可以用 旧时尚方式 来做 但我想学习新的 更简单 更智能的 Dojo 方式 具体如何工作现在并不重要
  • 如何从 WordPress 中的 jquery include 函数中删除版本查询变量

    这里有几个类似的问题 但似乎没有一个能解决我的具体情况 至少我发现没有 这是我用来在 WP 主题中包含最新 jquery 版本的代码 并确保它出现在页脚中 function current jquery version global wp
  • 使用 FormData 上传 JavaScript Blob

    我在将 javascript 创建的 blob 上传到我的服务器时遇到问题 基本思想是用户上传图像 在 javascript 中我对图像进行居中裁剪并在传输之前对其进行下采样 图像处理工作正常 但上传本身无法正常工作 这是执行从 canva
  • 引导网格中的绘图图周围有巨大的空白

    我有一个 Net 应用程序 我试图在其中使用创建一个图表bootstrap js and plotly js 当我创建响应式图表时 我遇到网格中存在巨大空白的问题 我发现问题的一部分是plotly svg container的大小默认高度为
  • “memset”没有 DLL 那么如何 ctype 它

    如何使用memset在 jsc 类型中 没有对应的 DLL 我搜索 搜索了 js ctype 代码 但找不到要破解的示例 如果你只是想memset一个数组为零字节 然后我有 好消息 大家 js ctypes 会将新数组初始化为零 否则 最简
  • 如何在 Safari 和 Native App 之间共享上下文?

    我有需要通过 Safari 设置一些上下文 上下文标记 然后从本机 iOS 应用程序读取该上下文 这样做的最佳实践是什么 到目前为止的一些想法 在 HTML 5 数据库中设置上下文 但我不确定这是否有效 因为该数据库可能只能从 Safari
  • HTML 标签在 Ionic 5 警报文本中不起作用

    我已将以下代码从 Ionic 3 迁移到 Ionic 5 const alert await this alertCtrl create subHeader About b this user name b message Test Mes
  • Flexbox 列的垂直间距相等

    我在CSS中努力让我的Flexbox在垂直等距的列中显示项目 从而使列的每行之间的空间均匀 html body flex container margin 0 height 100 width 100 body font family Dr
  • 为什么 phantomjs 不能在 MacOS Sierra 中工作?

    我们正在使用phantomjs 1 9 1 macosx phantomjs 2 0 0 macosx哪一个工作得很好OS X 埃尔卡皮坦更新后macOS 塞拉利昂它会引发以下错误 phantomjs 1 9 1 macosx phanto

随机推荐