悬停问题。 HTML和CSS

问题：这个想法是改变悬停时其内容颜色的div。除文本和图像（精灵）颜色在不同点处变化外，悬停在'地址'div上方的文字以及'addressicon'div上方的图片。有谁知道我怎样才能让这两个改变悬停在'地址'格。悬停问题。 HTML和CSS

HTML：

<section id="gallery"> 
    <div class="container" style="padding-top:40px;"> 

     <div class="address"><div class="title"><span>Address</span></div><br> 
      <div class="addressicon"></div> 
      <p><br>Address1<br> 
      Address2<br> 
      Address3<br> 
      Area<br> 
      City<br> 
      PostCode 
      </p> 
     </div> 

     <div style="width:33%;height:400px;display:inline-block;background-color:#000000"></div> 
     <div style="width:33%;height:400px;display:inline-block;background-color:#000000"></div> 

    </div> 
    </section>

CSS：

.address { 
width:33%; 
height:400px; 
display:inline-block; 
background-color:#CCC; 
color:#bcb7af;} 

.address:hover {color:#000000;} 

.address span { 
color:#bcb7af; 
align:center; 
font-size:24px; 
width:100%;} 

.address:hover span { 
color:#000000;} 

.title {text-align:center;} 

.addressicon { 
background: url(../images/address.png) bottom; 
width:202px; 
height:130px; 
margin: 0px auto;} 

.addressicon:hover { 
background-position: 0 0;}

非常感谢

问题就迎刃而解了新的CSS：

.address > .addressicon { 
    background: url(../images/address.png) bottom;} 

.address:hover > .addressicon, { 
    background-position: 0 0;}

来源

2013-03-01 Paul

如果您希望地址元素的祖先在鼠标悬停在地址元素上时更改其样式（我认为这是您要求的内容）然后，您不能使用纯CSS css + html做到这一点，遗憾的是，需要研究一个JavaScript/jQuery解决方案 – Sean 2013-03-01 10:01:51

.address:hover > .addressicon { 
    color: SOMETHING; 
}

永不离开div空。放入一个 ，以防止它的愚蠢行为。

来源

2013-03-01 10:07:50 Sheric

我不知道留下'div'空造成了奇怪的行为？它会导致什么样的奇怪行为？ – Sean 2013-03-01 10:10:08

有时，浏览器不理解结束标记以及进入空白div后的所有内容。 – Sheric 2013-03-01 10:13:58

好的，谷歌搜索后，我想我明白你的意思，总是很好学习新的东西！ – Sean 2013-03-01 10:26:30

悬停问题。 HTML和CSS

回答

相关问题