兩個同樣的div懸停只有一個

-1

我有一個CSS小問題hover ...我有兩個divs在同一班，但我只想hover只有一個。我已經嘗試過，但它不工作，如果它工作，它會改變每種顏色。兩個同樣的div懸停只有一個

<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的感謝

來源

2013-03-01 Live

我們可以有你的CSS過嗎？ – 2013-03-01 11:00:52

您想更改懸停時的報價顏色或什麼？ – 2013-03-01 11:11:11

問題，爲什麼使用：顯示後img？ – Toping 2013-03-01 11:11:14

我認爲這是你在找什麼：

HTML

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

CSS

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

我也做了一個jsFiddle

來源

2013-03-01 11:09:08 Amberlamps

兩個同樣的div懸停只有一個

回答

相關問題