html鼠标悬停显示多个div,javascript,html_js如何判断鼠标是否悬停在两个div之一上?,javascript,html,html5,css - phpStudy...

js如何判断鼠标是否悬停在两个div之一上?

1.鼠标悬停在a上时打开b

2.鼠标离开a且不在b上时则关闭b

2这个条件语句该怎么写?就是if()这段,功能代码不需要

$("#tag-btn1").on('mouseover',function(){

$('#second-tag-div1').addClass('second-tag-div-active');

$('.sidebar').addClass('z-index100');

$('#secondary-content1').addClass('display-block');

});

$("#second-tag-div1").on('mouseover',function(){

$('#second-tag-div1').addClass('second-tag-div-active');

$('.sidebar').addClass('z-index100');

$('#secondary-content1').addClass('display-block');

var btn1 = document.getElementById('tag-btn1');

var btn1 = document.getElementById('tag-btn1'):before;

btn1.style.backgroundColor = "#00c680";

btn1.style.color = "#FFF";

});

$("#tag-btn1").on('mouseout',function(){

$('#second-tag-div1').removeClass('second-tag-div-active');

$('.sidebar').removeClass('z-index100');

$('#secondary-content1').removeClass('display-block');

});

$("#second-tag-div1").on('mouseout',function(){

$('#second-tag-div1').removeClass('second-tag-div-active');

$('.sidebar').removeClass('z-index100');

$('#secondary-content1').removeClass('display-block');

});

相关阅读:

像知道像新浪微博用户资料这样的复杂一些的界面应该怎么处理视图?

angular中定义module时没有依赖其他模块,后面还能调用其他模块的服务吗?

js 对象的属性带[ 如何表示??

php的ci框架中的分页类应该怎样使用?

vue组件之间的通信

【管理系统】数据库新增记录如何在管理界面展现

一个手机最多能 "检测" 到多少个蓝牙列表?

Angular中ngAnimate遇到的问题

这个函数为什么还要判定类名存在

唯一兼容style标签scoped属性的火狐浏览器对:scope样式选择器的兼容性问题?

new操作符里面到底发生了什么?

apache配置django报错:cannot be loaded as Python modules

CSS图片居中问题?

垂直居中发现一个奇怪的问题

myeclipse10.7下无maven4eclipse

怎么获取到微信公众号上用户发送的话?

连接ftp服务器,公网centos通过ftp命令无法连接,本机cmd下的ftp命令和客户端可以连接

JavaWeb 项目 jar包 存放目录,基础问题。

以不同概率的方式发送消息测试服务器的性能问题

python如何合并批量输出

如果在悬停在一个div上时,其他的div也出现了提示框,通常是因为这些div共享了同一个tooltip元素。 在使用tooltip时,通常是将tooltip元素添加到需要悬停的元素的子元素中,并使用CSS将其隐藏。然后,当鼠标悬停在该元素上时,使用JavascriptCSS将tooltip元素显示出来。 如果多个div共享同一个tooltip元素,那么当鼠标悬停在一个div上时,其他的div也会受到影响,同时显示出相同的tooltip。 为了解决这个问题,可以为每个div都创建一个独立的tooltip元素。可以使用Javascript动态创建这些元素,并为每个元素设置不同的ID或class。然后,在鼠标悬停在一个div上时,只显示与该div相关的tooltip元素。 下面是一个使用Javascript创建多个独立tooltip元素的示例代码: HTML: ``` <div class="tooltip" data-tooltip="Tooltip 1">Hover me 1</div> <div class="tooltip" data-tooltip="Tooltip 2">Hover me 2</div> <div class="tooltip" data-tooltip="Tooltip 3">Hover me 3</div> ``` Javascript: ``` const tooltips = document.querySelectorAll('.tooltip'); tooltips.forEach((tooltip) => { const tooltipText = tooltip.getAttribute('data-tooltip'); const tooltipElement = document.createElement('div'); tooltipElement.classList.add('tooltip-element'); tooltipElement.textContent = tooltipText; document.body.appendChild(tooltipElement); tooltip.addEventListener('mouseover', () => { const tooltipPosition = tooltip.getBoundingClientRect(); tooltipElement.style.top = tooltipPosition.bottom + 'px'; tooltipElement.style.left = tooltipPosition.left + 'px'; tooltipElement.classList.add('visible'); }); tooltip.addEventListener('mouseout', () => { tooltipElement.classList.remove('visible'); }); }); ``` 在这个示例中,我们首先获取了所有具有`.tooltip`类的元素,并通过`getAttribute`方法获取了它们的`data-tooltip`属性,用于创建tooltip元素的文本内容。 然后,我们使用`document.createElement`方法动态创建了一个div元素,并为其添加了`.tooltip-element`类,该类用于控制tooltip元素的样式。我们还将tooltip元素添加到了`document.body`中,以便在页面任何位置都可以显示。 接下来,我们使用`addEventListener`方法为每个`.tooltip`元素添加了`mouseover`和`mouseout`事件监听器。当鼠标悬停在某个元素上时,我们可以使用`getBoundingClientRect`方法获取该元素的位置信息,并使用该信息将tooltip元素定位到该元素的下方。 最后,我们为tooltip元素添加了`.visible`类,用于显示该元素,并在鼠标移出时移除该类,以便隐藏tooltip元素。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值