Question

问题：想法是在悬停时改变其内容颜色的div。除了文本和图像（精灵）颜色在不同点变化;悬停在“地址”div上方的文本和“addressicon”div上方的图像。有没有人知道我怎样才能让他们两个都改变悬停在'地址'div。

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;}

Answer 1

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

永远不要让div为空。在其中添加 ，以防止它出现愚蠢的行为。

悬停问题。 HTML和CSS

1 个答案: