Having a bit of trouble with CSS hover... I have two divs in the same class and I need to specify hover effects for only one of them. I've tried some solutions but they either don't work or change colors on both.
<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>
==============================================================
When hovering over quoteLeft, I want to change the color of this icon present 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....}
I'm open to any CSS or jQuery suggestions. Thanks!