实现鼠标悬停显示书名、作者和价格的悬浮提示框功能

在开发在线书店网站的过程中,提供一个直观且用户友好的界面对于吸引和留住客户至关重要。其中一个能有效提升用户体验的功能是在用户将鼠标悬停在书封面上时,显示包含书名、作者和价格的悬浮提示框。这不仅为用户提供了即时信息,还增加了界面的互动性。下面我将详细介绍如何使用JavaScript、HTML和CSS来实现这一功能。

一、HTML结构

首先,我们需要在HTML中定义每本书的基本结构。为了方便JavaScript获取数据,我们将使用自定义的data-属性来存储书名、作者和价格。

<div class="book-container">  <img class="book-cover" src="path_to_book_cover.jpg" alt="Book Cover"  data-title="The Catcher in the Rye" data-author="J.D. Salinger" data-price="$12.99">  <!-- 其他书本元素 -->  
</div>

 

二、CSS样式

接下来,我们需要为悬浮提示框添加一些基本的CSS样式。这些样式将定义提示框的外观,如背景色、边框、文字样式等。

/* 隐藏默认的title提示 */  
.book-cover {  pointer-events: none; /* 防止图片本身触发事件,如果需要图片可点击则移除此行 */  
}  /* 自定义悬浮提示框的样式 */  
.tooltip {  position: absolute;  display: none; /* 默认隐藏提示框 */  padding: 10px;  background-color: #333;  color: #fff;  border-radius: 5px;  font-size: 14px;  z-index: 1000;  white-space: nowrap; /* 防止文本换行 */  
}  /* 当鼠标悬停在书封面上时显示提示框 */  
.book-container:hover .tooltip {  display: block;  
}

注意:在实际应用中,我们可能不需要.book-coverpointer-events: none;属性,这取决于是否希望图片本身能够响应点击事件。此外,上面的CSS样式中.tooltipdisplay属性是通过:hover伪类来切换的,但这种方式实际上并不能实现我们想要的效果,因为我们需要更精细地控制提示框的位置和显示内容。下面的JavaScript部分将提供正确的实现方法。

三、JavaScript交互

最后,我们使用JavaScript来监听鼠标的悬停事件,并动态创建和显示悬浮提示框。

 

document.addEventListener('DOMContentLoaded', function() {  const bookCovers = document.querySelectorAll('.book-cover');  bookCovers.forEach(function(bookCover) {  bookCover.addEventListener('mouseenter', function(event) {  // 创建悬浮提示框  const tooltip = document.createElement('div');  tooltip.classList.add('tooltip');  // 获取并设置提示信息  const title = bookCover.getAttribute('data-title');  const author = bookCover.getAttribute('data-author');  const price = bookCover.getAttribute('data-price');  tooltip.innerHTML = `<b>${title}</b><br>${author}<br>${price}`;  // 设置提示框位置  const x = event.clientX;  const y = event.clientY;  tooltip.style.left = `${x + 10}px`; // 稍微偏移鼠标位置,以免遮挡视线  tooltip.style.top = `${y + 10}px`;  // 将提示框添加到文档中  document.body.appendChild(tooltip);  // 当鼠标移出时移除提示框  bookCover.addEventListener('mouseleave', function() {  document.body.removeChild(tooltip);  }, { once: true }); // 使用once选项确保事件只触发一次  });  });  
});

然而,上述代码中的实现方式存在一个问题:当鼠标快速移动时,可能会创建多个提示框,并且在页面上留下孤立的提示框。更好的方法是使用一个全局的提示框元素,并在每次鼠标悬停时更新它的内容和位置。

改进后的JavaScript代码:

document.addEventListener('DOMContentLoaded', function() {  const bookCovers = document.querySelectorAll('.book-cover');  const tooltip = document.createElement('div'); // 创建一个全局的提示框元素  tooltip.classList.add('tooltip');  document.body.appendChild(tooltip); // 将提示框添加到文档中  function showTooltip(event, title,

 

四、总结与感悟

通过这个项目,我深刻体会到了JavaScript在网页交互中的强大作用。通过简单的几行代码,我们就能实现丰富的动态效果和交互功能,极大地提升了用户体验。

同时,我也意识到在开发过程中要注重细节和用户体验。例如,在这个功能中,我们需要确保悬浮提示框的位置和样式都能够适应不同的页面和设备,以确保用户能够方便地使用这个功能。

总之,JavaScript是一门非常有趣和实用的编程语言,我相信在未来的学习和工作中,我还能够发掘出更多有趣和实用的JS功能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/598047.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

闭包(js的问题)

闭包的概念Closure&#xff1a;作用域 引用了自由变量的函数&#xff0c;这个被引用的自由变量将和这个函数一同存在&#xff1b; 即使已经离开了创造它的环境也不例外。 所以&#xff0c;闭包是由函数和其他相关的引用环境组合而成&#xff0c;实现信息驻留&#xff1b; 信…

如何在powershell查看.jar文件的java编译版本

整体过程 总的流程如下&#xff1a; 1. 获取.jar文件的绝对地址&#xff0c;即$JarPath $JarPath 2. 选择.jar文件任意一个类&#xff0c;即$ClassName $ClassName 3. 使用以下命令找到major字段跟着数字&#xff0c;即 javap -verbose -cp $JarPath $ClassName | S…

【解决openGauss无法使用gs_check等服务器端命令问题】

【解决openGauss无法使用gs_check等服务器端命令问题】 一、问题描述二、问题原因三、解决方法 一、问题描述 [ommopengauss03 ~]$ gs_check -i CheckCPU Parsing the check items config file successfully [GAUSS-53026]: ERROR: Execute SSH command on host 192.168.56.19…

给出一句话来描述想要的图片,就能从图库中搜出来符合要求的

介绍 地址&#xff1a;https://github.com/mazzzystar/Queryable The open-source code of Queryable, an iOS app, leverages the OpenAIs CLIP model to conduct offline searches in the Photos album. Unlike the category-based search model built into the iOS Photos…

项目使用PowerJob

新一代的定时任务框架——PowerJob 简介 PowerJob是基于java开发的企业级的分布式任务调度平台&#xff0c;与xxl-job一样&#xff0c;基于web页面实现任务调度配置与记录&#xff0c;使用简单&#xff0c;上手快速&#xff0c;其主要功能特性如下&#xff1a; 使用简单&…

如何在 Windows 上从电脑硬盘恢复照片

如今&#xff0c;随着相机设备的普及&#xff0c;您可以轻松地一次拍摄一堆照片&#xff0c;将它们传输到硬盘上&#xff0c;然后再拍摄更多照片。但是&#xff0c;如果您的所有照片意外丢失在驱动器中怎么办&#xff1f;你能恢复它们吗&#xff1f; 在本指南中&#xff0c;我…

答案解析——C语言—第3次作业—算术操作符与关系操作符

本次作业链接如下&#xff1a; C语言—第3次作业—算术操作符与关系操作符 1.在C语言中&#xff0c;表达式 7 / 2 的结果是多少&#xff1f; - A) 3.5 - B) 3 - C) 4 - D) 编译错误 答案&#xff1a;B) 3 解析&#xff1a; 在C语言中&#xff0c;当两个整数进行除法运算时&…

EasyRecovery2024永久免费版电脑数据恢复软件

EasyRecovery是一款操作安全、价格便宜、用户自主操作的非破坏性的只读应用程序&#xff0c;它不会往源驱上写任何东西&#xff0c;也不会对源驱做任何改变。它支持从各种各样的存储介质恢复删除或者丢失的文件&#xff0c;其支持的媒体介质包括&#xff1a;硬盘驱动器、光驱、…

postgresql可视化导入csv文件

不需要在命令行copy了&#xff0c;只需简单点几下 1.在数据库下建一个schema 右击选中数据库-new schema 2.双击你创建的schema&#xff0c;出现tables 3.右击tables&#xff0c;选择import wizard 4.选择你想导入的文件格式&#xff0c;之后一直next 5.选择你的文件所在位置…

C语言实用第三方库Melon开箱即用之多线程模型

在之前的文章中&#xff08;开发利器——C 语言必备实用第三方库&#xff09;&#xff0c;笔者介绍了一款Linux/UNIX下C语言库Melon的基本功能&#xff0c;并给出了一个简单的多进程开箱即用的例子。 本文将给大家介绍Melon中多线程的使用方法。 在Melon中有三种多线程模式&a…

Redis 之父锐评 LLM 编程:全知全能 Stupid|一周IT资讯

阿里通义千问上线“科目三”&#xff0c;刘皇叔、奥特曼、马斯克通通没逃过 在刚到的2024年&#xff0c;阿里通义千问 APP 上线图片生成舞蹈功能&#xff0c;用户只需输入一张图片&#xff0c;就能生成爆款舞蹈图片。 不管是“科目三”&#xff0c;还是鬼步舞、兔子舞&#x…

(18)Linux 实现简易版shell

前言&#xff1a;做一个 "会创建&#xff0c;会终止&#xff0c;会等待&#xff0c;会程序替换" 的简易 shell 。 1、显示提示符和获取用户输入 shell 本质就是个死循环&#xff0c;我们不关心获取这些属性的接口&#xff0c;如果要实现 shell&#xff1a; 1&…

015:JS之正则表达式,web乱码和路径问题总结,MVC架构模式

一 JS的正则表达式 1 正则表达式简介 正则表达式是描述字符模式的对象。正则表达式用于对字符串模式匹配及检索替换&#xff0c;是对字符串执行模式匹配的强大工具。 语法 var pattnew RegExp(pattern,modifiers);//正则的格式模版&#xff0c;修饰符或者更简单的方式:var pa…

权威测评首家通过!亚信安慧AntDB通过中国信通院数据库迁移工具专项测试

近日&#xff0c;亚信安慧数据库数据同步平台在中国信通院第17批“可信数据库”数据库迁移工具专项测试中&#xff0c;完全符合《数据库迁移工具能力要求》&#xff0c;成为首家通过标准测试的产品。这一成果标志着湖南亚信安慧科技有限公司&#xff08;简称“亚信安慧”&#…

工智能基础知识总结--为什么使用LSTM+CRF进行序列标注

为什么使用LSTM+CRF进行序列标注 直接使用LSTM进行序列标注时只考虑了输入序列的信息,即单词信息,没有考虑输出信息,即标签信息,这样无法对标签信息进行建模,所以在LSTM的基础上引入一个标签转移矩阵对标签间的转移关系进行建模。这一点和传统CRF很像,CRF中存在两类特征函…

Pandas透视表及应用

Pandas 透视表概述 数据透视表&#xff08;Pivot Table&#xff09;是一种交互式的表&#xff0c;可以进行某些计算&#xff0c;如求和与计数等。所进行的计算与数据跟数据透视表中的排列有关。 之所以称为数据透视表&#xff0c;是因为可以动态地改变它们的版面布置&#xf…

Git保姆级安装教程

Git保姆级安装教程 一、去哪下载二、安装2.1 具体安装步骤2.2 设置全局用户签名 一、去哪下载 1、官网&#xff08;有最新版本&#xff09;&#xff1a;https://git-for-windows.github.io/ 2、本人学习时安装的版本&#xff0c;链接&#xff1a;https://pan.baidu.com/s/1uAo…

机器学习-贝叶斯网络

贝叶斯分类器 贝叶斯网络是通过假设数据的先验分布&#xff0c;利用贝叶斯公式计算后验概率&#xff0c;将样本根据概率进行分类。 常用贝叶斯网络&#xff1a;1.朴素贝叶斯分类器&#xff1b;2.半朴素贝叶斯分类器&#xff1b;3.贝叶斯网&#xff1b;4.EM算法 朴素贝叶斯分…

Spark内核解析-数据存储5(六)

1、Spark的数据存储 Spark计算速度远胜于Hadoop的原因之一就在于中间结果是缓存在内存而不是直接写入到disk&#xff0c;本文尝试分析Spark中存储子系统的构成&#xff0c;并以数据写入和数据读取为例&#xff0c;讲述清楚存储子系统中各部件的交互关系。 1.1存储子系统概览 …