元素将鼠标悬停在另一个元素上
html element to hover over another element?
如何将
一个HTML元素放在另一个元素的前面,以便当一个特定元素悬停在一个元素上时,新元素将出现在它的前面。这是我的代码:
<div class="third">
<label> Enter Password: </label>
<input type="text" name="pword1" class="iBox" id="pword1" onmouseout="HideToolTip()" onmouseover="ShowToolTip()" onkeyup="allFunctions()" placeholder="choose a password" autocomplete="off">
<p id="tooltipbox" style="visibility:hidden">Password must be between 8-16 characters, contain an uppercase, lowercase, number and special character</p>
</div>
我有一个工具提示,到目前为止它可以工作。 但是当我将鼠标悬停在文本区域上时,它会向下推它下面的元素,以便工具提示可以适合页面,当我移动鼠标以"取消悬停"它时,元素会重新向上定位。 我想要一种方法 当我悬停时,一个消息框被带到前面,下面的所有元素都不会移动。 很像当你将鼠标悬停在此页面上的任何链接上,它们会显示一个小对话框,该对话框仅在悬停时存在,并且不会重新定位页面上的其他元素。
您需要指定z-index
和position
属性;例如:
p#tooltipbox{
z-index:1000;
position:absolute;
top:0;//move the element to the top of div.third of div.third
left:0;//if you want to move the element to the left;
}
div.third{
position:relative;
}
以下是更多信息
z 索引属性
位置属性
我为你创建了一个jsfiddle。单击以下链接以查看示例:http://jsfiddle.net/xL7j4k6g/
请参阅上面的链接,但这里也是代码:
.fieldarea {
position: relative;
border: 1px solid red;
width: 50%;
}
.fieldarea label {
width: 35%;
display: inline-block;
}
.fieldarea input {
width: 50%;
display: inline-block;
}
.tooltipbox {
position: absolute;
top: 0px;
right: 0px;
z-index: 1000;
max-width: 200px;
border: 1px solid gray;
background-color: yellow;
opacity: 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fieldarea:hover .tooltipbox {
opacity: 1;
}
<div class="fieldarea">
<label for="pword1">Enter Password:</label>
<input type="text" name="pword1" placeholder="choose a password" autocomplete="off">
<div class="tooltipbox">Password must be between 8-16 characters, contain an uppercase, lowercase, number and special character</div>
</div>
<div class="fieldarea">
<label for="pword1">Enter Password:</label>
<input type="text" name="pword1" placeholder="choose a password" autocomplete="off">
<div class="tooltipbox">Password must be between 8-16 characters, contain an uppercase, lowercase, number and special character</div>
</div>
(这看起来并不"酷",但有效。我建议研究一下 CSS3 过渡到一些不错的转换触摸 - 例如,悬停时在工具提示中淡入淡出。
谢谢大卫
你可以使用绝对定位和jQuery。这并不完美,而是一个简单的例子。
$(document).ready(function() {
$('.box1').hover(function() {
$('.box2').toggleClass('active')
})
})
.wrapper {
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
border: 2px solid black;
background-color: white;
}
.box1 {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background-color: blue;
}
.box2 {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 100;
background-color: red;
}
.active {
left: 0;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
相关文章:
- 使用clickToggle并在单击另一个元素时关闭元素
- 按我自己的类克隆另一个元素的内容和顺序
- 如何通过HTML+CSS中的另一个元素Selector更改元素的属性值
- 使用svg和javascript将一个类的元素动画化为另一个类
- 将html元素插入到文本字符串中,以匹配另一个html字符串
- jQuery-将列表项的一个元素移动到同一项的另一个元素中+对我的列表中的每个项执行此操作
- jquery从另一个元素中移除移除
- DIV怎么能像Javascript中的另一个元素一样工作呢
- 使用数据属性将HTML数据复制到另一个元素
- 如何从另一个带下划线的数组中筛选带元素的数组
- 将鼠标悬停在Angular JS中的一个元素上,并将Class添加到另一个元素中
- 在类JavaScript选择的另一个元素中选择一个标记元素
- 只要存在,就用另一个元素替换一个元素
- 检查一个元素是否有一个类与另一个类总是返回true
- 初学者反应查询(如何删除一个元素并附加另一个元素)
- 将jquery ui窗口的父元素设置为另一个元素
- 如何激活下拉菜单:在一个元素上单击768px宽度下方,在另一个元素上将鼠标悬停在768px上方
- Pixijs将元素附加到另一个元素
- 将SVG元素拖动到另一个SVG元素上
- JavaScript:将输入范围行为链接到另一个元素