Question

嘿，我已经创建了一个HTML文件，它显示了一个带有java脚本的跨度onmouseover，但是它下面的文本正在关闭。我不知道如何解决这个问题。请帮助我这里是我的代码与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>

Answer 1

如果你position:absolute; .fblike它不会破坏其他元素的流动。因为它会position:relative;。

请参阅此处的小提琴：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;
}

Answer 2

您需要将.fblike类定位为绝对值，然后修改css中的顶部和右侧属性以适应。

我在此处已展示：http://jsfiddle.net/drfjy/

Answer 3

使用ID #fblike代替.fblike类，更改排名absolute并设置top和left边缘。

试试这段代码：

<强> DEMO

#fblike
{
display: none;
position: absolute;
width: 20px;
top: 5px;
left: 100px;
}

Answer 4

您正在尝试使用style.display，当值设置为none时，它不会消耗空间。如果设置为阻止，则将消耗该空间并显示该空间。

您可以尝试使用style.visibility来实现您的需求。

使用鼠标悬停显示跨度时，文本向下移动

4 个答案: