- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 Fiddle 中有以下代码。
我试图在右上角的 div 中交替显示两段文本。当我将鼠标悬停在 div 上并上下移动时,文本会按预期交替。悬停时,当前文本隐藏,隐藏的文本出现。将鼠标悬停时,会发生同样的事情。
但是当我将鼠标悬停在它上面并向左移动时,当前文本不会消失并且隐藏文本不会出现(这是预期的行为)。
我发现,这是一个文本宽度不等的问题。如果我将宽度设置为 100px,那么它就可以工作。
我不想设置宽度,因为该 div 中的文本长度可变。
发生了什么事,我该如何在不将宽度设置为固定数字的情况下修复它?
HTML:
<div class="topBar">
<div class="item2" id = "i1">
0123456789
</div>
<a class="item2" id = "i2" href="#">
9876
</a>
</div>
CSS:
.topBar {
position: fixed;
width: 100%;
height:50px;
top: 0;
min-width:480px;
border:1px solid red;
z-index:1000;
}
.item2 {
position:absolute;
right:0;
border-left: 1px solid black;
border-right: 1px solid black;
height:50px;
}
#i2 {
display:none;
}
JavaScript
$("#i1").hover(
function() {
$(this).hide();
$("#i2").show()
},
function() {
}
);
$("#i2").hover(
function() {
},
function() {
$(this).hide();
$("#i1").show()
}
);
编辑:
我通过实践破解了它并且它有效
$("#i2").width($(this).width());
但我还是想知道正确答案。
最佳答案
当您向左移动时,$("#i2").hover
正在触发,但是 因为 #i1
更宽,您会立即“悬停”在它上面,它会重新触发 $("#i1").hover
,这就是保留 #i2
的原因显示。当然,现在您并没有将鼠标悬停在 #i2
上。 , 所以你必须重新进入它然后移出顶部或底部以触发它的退出而不重新触发 #i1
功能。
我想不出比让宽度相等(无论是通过 CSS 还是通过 javascript 设置)更优雅的方式来处理这种情况。
关于javascript - 将鼠标悬停在宽度不等的重叠 div 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17644286/
谁能解释为什么这些 JavaScript 数组不等式比较的计算结果为真? [""] !== [""] [1] !== [1] [] !== [] [""] != [""] [1] != [1] []
好的,所以我一直在努力学习掌握子进程并正确地等待它们完成。我已经阅读了很多 Stack Overflow Q/A,但我似乎仍然无法按照我的意愿让它工作。我一直在阅读/搜索这本书(C++ Primer
根据this , !==! 是不等于字符串运算符。尝试一下,我得到: C:\> if "asdf" !==! "fdas" echo asdf !==! was unexpected at this
这是一道面试题: Suppose: I have 100 trillion elements, each of them has size from 1 byte to 1 trillion byte
如何集成功能 f(y) w.r.t 时间;即 'y'是一个包含 3000 个值和值 time(t) 的数组从 1 到 3000 不等。所以,在整合 f(y) 后我需要 3000 个值. 积分将是不确定
我是一名优秀的程序员,十分优秀!