相关文章推荐
粗眉毛的薯片  ·  像素操作 - Web API | MDN·  3 月前    · 
细心的手术刀  ·  esbuild - API - ...·  3 月前    · 
大鼻子的镜子  ·  esbuild - API | ...·  3 月前    · 
从未表白的骆驼  ·  js处理日期时区问题开发者社区·  1 月前    · 
失落的炒粉  ·  2024年温州国际部\国际学校课程、学费大汇 ...·  7 月前    · 
拉风的勺子  ·  刘涛《天龙八部》有水戏,天气冷不敢下河,胡军 ...·  11 月前    · 
心软的小虾米  ·  R语言支持向量机变量重要性 - CSDN文库·  1 年前    · 
朝气蓬勃的电脑桌  ·  马来西亚本科留学项目-西安外国语大学国际学院 ...·  1 年前    · 
沉着的作业本  ·  Excel ...·  2 年前    · 
Code  ›  javascript - js如何判断鼠标是否悬停在两个div之一上? -
div标签 js div js代码
https://segmentfault.com/q/1010000004906076
奔跑的铁板烧
2 年前
segmentfault segmentfault
注册登录
问答 博客 标签 活动
发现
✓ 使用“Bing”搜本站 使用“Google”搜本站 使用“百度”搜本站 站内搜索
注册登录
  1. 首页
  2. 问答
  3. javascript
  4. 问答详情

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

头像
AI_Hecz
1.2k 6 62 115
发布于
2016-04-09
更新于
2016-04-09

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');
javascript html html5 css
阅读 14.8k
7 个回答
得票 最新
头像
hsfzxjy
22k 3 18 33
发布于
2016-04-09
✓ 已被采纳

https://jsfiddle.net/hsfzxjy/rs776m3r/7/

$(() => {
  let $A = $("#A"), $B = $("#B");
  $B.hide();
  $A.hover(() => {
    $B.fadeIn();
  }, (e) => {
    if (e.toElement == $B[0]) return;
    $B.fadeOut();
  $B.mouseout(function (e) {
    if (e.toElement == $A[0]) return;
    $(this).fadeOut();
头像
justforuse
440 1 14 21
发布于
2016-04-09

监听事件?
jquery中有hover函数

头像
keep_M
476 3 25 51
发布于
2016-04-09
更新于
2016-04-09

先计算出 a b 距离屏幕的位置,然后在鼠标移动过程中也算出他距离屏幕的值,如果在 a 或在 b 的范围内就可以做接下来的操作了

头像
炑木
1.4k 3 11
发布于
2016-04-09

if(isMouseOnA) { //鼠标在A上

} else if(!isMouseOnB) { //鼠标不在B上

头像
Eric_Huang
251 3 7
发布于
2016-04-09

hover 事件委托

头像
dustar
69 1
发布于
2016-04-09
更新于
2016-04-10

纯css都可以吧

<div id="a">
    <div id="b">
    display: none;
#a:hover #b {
    display: block;

如果不是父子元素的话

$('#a').hover(function() {
    $('#b').addClass('aHover');
}, function() {
    $('#b').removeClass('aHover');
    display: none;
#b.aHover,
#b:hover {
    display: block;
头像
littlelyon
7.9k 1 9 20
发布于
2016-04-10

如果我没理解错的话,其实就是判断当响应onmouseout事件时,判断鼠标在哪个元素范围内(比如某个的div)?

这个可以判断鼠标的坐标(clientX和clientY)是否在div元素的范围内,也就是div元素的坐标(offsetTop和offsetLeft)加上它的范围(offsetWidth和offsetHeight)

 
推荐文章
粗眉毛的薯片  ·  像素操作 - Web API | MDN
3 月前
细心的手术刀  ·  esbuild - API - esbuild 中文
3 月前
大鼻子的镜子  ·  esbuild - API | esbuild中文文档 | esbuild中文网
3 月前
从未表白的骆驼  ·  js处理日期时区问题开发者社区
1 月前
失落的炒粉  ·  2024年温州国际部\国际学校课程、学费大汇总!-学校大全网
7 月前
拉风的勺子  ·  刘涛《天龙八部》有水戏,天气冷不敢下河,胡军鼓励的方式很直接_萧峰
11 月前
心软的小虾米  ·  R语言支持向量机变量重要性 - CSDN文库
1 年前
朝气蓬勃的电脑桌  ·  马来西亚本科留学项目-西安外国语大学国际学院-国家级出国留学培训基地
1 年前
沉着的作业本  ·  Excel VBA编程:将数字转换为日期列_vba数字转换日期格式-CSDN博客
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号