Question

我对CSS hover有一点问题...我在同一个班级中有两个divs，但我想hover只有一个。我已经尝试了但它没有工作，如果它正在工作，它会改变每种颜色。

<div class="container iphone">
    <!-- First box -->
    <div class="span3 iphone-box-left">
  ======> <div class="quoteLeft"> <====== :hover
            <blockquote>
                <p>
                   description here
                </p>
            </blockquote>
            <p class="credit">
               johny 
            </p>
        </div>
    </div>
    <!-- First box end -->
    <!-- Second box -->
    <div class="span6">
        <img src="images/iphone.png">
        <!-- Start Logo -->
        <div class="logo-second">
            <h3>
         ==============================================================
         So when i hover on qouteLeft i wanna change the color on icon

         this icon i also have in logo

         ====> <i class="icon-cloud icon-large"></i> <=================
                creative
            </h3>
        </div>
        <!-- Logo end -->
    </div>
    <!-- Second box end -->

CSS

.iphone {
    position: relative; margin:50px auto; background:url(../images/11.png);
}


.quoteLeft {
    position:relative;
    top:40px;
    padding:15px 25px 20px;
    margin:20px auto;
    font:italic 26px/1.4 Georgia, serif;
    color:#fff;
    background:rgba(34, 34, 34, .5);
}

.quoteLeft:after {
    content:"";
    position:absolute;
    top:100%;
    left:100%;
    margin-top:-4px;
    background:url(../images/box-line.png) no-repeat;
    width:150px; height:165px;

}
.quoteRight {
    position:relative;
    top:150px;
    padding:15px 25px 20px;
    margin:20px auto;
    font:italic 26px/1.4 Georgia, serif;
    color:#fff;
    background:rgba(34, 34, 34, .5);
}

.quoteRight:after {
    content:"";
    position:absolute;
    top:100%;
    right:80%;
    margin-top:-4px;
    background:url(../images/box-line-2.png) no-repeat;
    width:300px; height:165px;

}
.credit {
    margin:1em 0 0;
    font:14px/1.2 Arial, sans-serif;
}

.credit:before {
    content:"— ";
}

blockquote, p {padding:0; margin:0;}


.logo-second { position:absolute; margin-top:-20%; margin-left:11%;}
.logo-second h3 { font-size:56px;}


.quoteLeft:hover  {And....}

我更喜欢任何想法css或jquery 感谢

Answer 1

我认为这就是你要找的东西：

<强> HTML

<div class="main">
    <div class="first">First</div>
    <div class="second">Second</div>
</div>

<强> CSS

.main .first:hover ~ .second {
    background-color: #f00;
}

我还制作了jsFiddle

两个相同的div只悬停一个

1 个答案: