Html CSS-在不移动块的情况下移动文本
我在我想要的地方设计了一些东西,这些东西看起来很酷,但我需要在“buble”中移动一个短文本。使其看起来像: 但它看起来像: 我的CSS:Html CSS-在不移动块的情况下移动文本,html,css,Html,Css,我在我想要的地方设计了一些东西,这些东西看起来很酷,但我需要在“buble”中移动一个短文本。使其看起来像: 但它看起来像: 我的CSS: #news #right ul li{ list-style-position: inside; /* Bodka v novom riadku vo vnutry */ list-style-type: none; /* bez bodky */ background-image: url("image
#news #right ul li{
list-style-position: inside; /* Bodka v novom riadku vo vnutry */
list-style-type: none; /* bez bodky */
background-image: url("images/black_bar.png");
background-repeat: repeat-x;
color: #898989;
height:45px;
width: 569px;
line-height: 45px;
border 1px;
border-color: #898989;
position: relative;
right: 40px;
}
#news #right ul li:hover{
list-style-position: inside; /* Bodka v novom riadku vo vnutry */
list-style-type: none; /* bez bodky */
background-image: url("images/blue_bar.png");
background-repeat: repeat-x;
color: #FFFFFF;
height:45px;
width: 569px;
line-height: 45px;
border 1px;
border-color: #898989;
position: relative;
right: 40px;
}
#news #right ul li a:visited{
color: #898989;
}
#news #right ul li a:active{
color: #898989;
}
#news #right ul li a:link{
color: #898989;
}
#news #right ul{
padding 0px auto;
margin: 0px auto;
}
.newsheading{
background-image: url("images/cs_icon.png");
background-repeat: no-repeat;
margin-left: 20px;
padding-left: 30px;
margin-top: 10px;
height: 22px;
line-height: 22px;
display: inline-block;
}
#news #right ul li:hover .newsheading{
color: #FFFFFF;
}
#news #right ul li .blue-arrow{
background-image: url("images/blue_arrow.png");
background-repeat: no-repeat;
width: 31px;
height: 46px;
position: absolute;
right: 568px;
display: none;
}
#news #right ul li:hover .blue-arrow{
display: inline-block;
}
#news #right ul li .balloon{
width: 32px;
height: 27px;
background-image: url("images/white_buble.png");
margin-left: 250px;
display: none;
}
#news #right ul li:hover .balloon{
display: inline-block;
vertical-align: middle;
color: #1d5f97;
}
#news #right ul li .blueballoon{
width: 32px;
height: 27px;
background-image: url("images/blue_buble.png");
display: inline-block;
margin-left: 250px;
vertical-align: middle;
text-align: center;
color: #FFFFFF;
}
#news #right ul li:hover .blueballoon{
display: none;
vertical-align: middle;
}
我的HTML看起来像:
<span id="right">
<ul>
<li><span class="blue-arrow"></span><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span><span class="blueballoon">10</span><span class="balloon">10</span></li>
<li><span class="blue-arrow"></span><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span><span class="blueballoon">10</span><span class="balloon">10</span></li>
<li><span class="blue-arrow"></span><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span><span class="blueballoon">10</span><span class="balloon">10</span></li>
<li><span class="blue-arrow"></span><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span><span class="blueballoon">10</span><span class="balloon">10</span></li>
<li><span class="blue-arrow"></span><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span><span class="blueballoon">10</span><span class="balloon">10</span></li>
</ul>
</span>
- 1010
- 1010
- 1010
- 1010
- 1010
bubles中的文本被移出,我需要更改它,这里有人可以帮我吗?此外,即使在hover:newheading中设置为#FFFFFF,我也无法在悬停时更改文本颜色
可在以下网站上找到实时预览:
感谢您阅读本文:)只是为了警告您-使用气球作为图像可能是错误的。如果这个数字太长,即2333435,怎么办?它的评论数不应该超过99:),有没有其他方法不使用CCS3或JS来实现呢?没有必要避免使用CSS3或JS,但有没有解决方案不使用CSS3,使用sprites。谷歌“滑动门css”。谢谢你的推荐。怎么这么简单?你是对的!你能帮我在文本悬停时设置白色吗?
#news #right ul li .blueballoon {
line-height: 24px;
}