使用鼠标悬停以显示跨度时文本向下移动
[英]Text moves down when using mouseover to show a span
问题描述
Hey i have created a HTML file which is showing a span onmouseover with java script but the text which is under it is going down. 
嘿，我创建了一个HTML文件，该文件使用Java脚本显示了一个onmouseover跨度，但是其下的文本正在下降。 I don't know how can i solve this problem.Please Help me Here is My Code with HTML,CSS and some javascript 我不知道该如何解决此问题。请帮助我，这是我的HTML，CSS和一些javascript代码
<html><body><style>.Category{
background-color: rgb(77, 178, 236);
padding: 8px 12px;
width:10px;
height:500px;
margin:4px;
font-family: 'Roboto Condensed',sans-serif;
color: white !important;
z-index: 1;
}
.fblike
{
display: none;
position:relative;
top:-25px;
right:-600px;
width:20px;
}</style>
<div id="content"><div id="content1" onmouseover="document.getElementById('fblike').style.display = 'block';" onmouseout="document.getElementById('fblike').style.display = '';"><span class="Category">How TO</span> <span id="fblike" class="fblike">Utkarsh</span><br><br><div class="image">Utkarsh</div></div><hr>
</body></html>
4 个解决方案
解决方案1
1 2014-02-05 10:47:51
If you position:absolute; 如果您的position:absolute; your .fblike it won't disrupt flow of the other elements. 您的.fblike不会干扰其他元素的流动。 Because it's position:relative; 因为它的position:relative; it will. 它会。
See the fiddle here: http://jsfiddle.net/A6afY/ 在这里查看小提琴： http : //jsfiddle.net/A6afY/
.Category{
background-color: rgb(77, 178, 236);
padding: 8px 12px;
width:10px;
height:500px;
margin:4px;
font-family: 'Roboto Condensed',sans-serif;
color: white !important;
z-index: 1;
}
.fblike
{
display: none;
position:absolute;
/* commented so easier to show the fix
top:-25px;
right:-600px; */
width:20px;
}
#content1 {
/* absolute positioned elements must have positioned parents */
position: relative;
}
解决方案2
0 已采纳 2014-02-05 10:47:46
You need to position the .fblike class as absolute and then modify the top and right properties in the css to suit. 您需要将.fblike类定位为绝对类，然后修改css中的top和right属性以适合。
I have shown this here: http://jsfiddle.net/drfjy/ 我在这里显示了这个： http : //jsfiddle.net/drfjy/
解决方案3
0 2014-02-05 10:51:01
解决方案4
0 2014-02-05 10:57:24
You are trying style.display which won't consume space when the value is set to none. 您正在尝试style.display，当该值设置为none时不会占用空间。 If it is set to block the space will be consumed and it will be displayed. 如果设置为阻止，则空间将被消耗并显示出来。
You can try style.visibility for achieving what you need. 您可以尝试style.visibility实现所需的功能。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.