Question

我是CSS的新手，我只想尝试制作一些＆＃34;突发新闻＆＃34;或者类似的东西，当用户用鼠标在它上面时改变背景颜色，也试图添加一些新的工作人员。

应该如何看待： example

我的尝试看起来： example

重要的是我需要同时改变

背景
添加蓝色箭头
文字颜色
右侧网站上的Buble图标

我完全不知道怎么做:(

HTML：

  <span id="right">
    <ul>
    <li><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span></li>
    <li><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span></li>
    <li><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span></li>
    <li><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span></li>
    <li><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span></li>
    </ul>
  </span>

CSS：

#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: #898989;
    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;   
}

有人可以帮助我解决这个问题吗？实时预览可以在这里完成：http://funedit.com/andurit/try2/

感谢大家阅读这篇文章。

Answer 1

将#news #right ul li :hover{更改为#news #right ul li:hover{，以便样式适用于正确的元素。

Answer 2

你的主要问题似乎是新闻标题课上的margin-top: 10px;我不确定在哪个地方使用但是试图摆脱它。

同时尝试将#news #right ul li :hover更改为#news #right ul li span:hover，以便文字不会受到悬停的影响。

#news #right ul li span: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: #898989;
    height:45px;
    width: 569px;
    line-height: 45px;
    border 1px;
    border-color: #898989;
    position: relative;
    right: 40px;
}

对于三角形/箭头，请尝试使用此技术http://cssarrowplease.com/或此http://css-tricks.com/snippets/css/css-triangle/

祝你好运

Answer 3

我可以就箭头显示给你一些东西。

<div id="the1">
 <div id="the2">
 </div>
</div>

CSS：

#the2 {display:none}
#the1:hover #the2 {display:inline}

这是你可以实际显示并且不显示CSS中的某些元素。你需要小心#the2在＃the1里面。 #the1:hover #the2基本上说如果你将鼠标悬停在＃the1上，我就会修改＃the2。

希望有所帮助。

CSS - 在悬停时更改多个内容

3 个答案: