SlowCode
جمعه 11 مهر 1393, 13:59 عصر
سلام
واسه اینکه رو hover دیو1 عکس بزرگ بشه باید اینطوری بنویسی:
.div1:hover img{}
حالا هر استایلی بنویسی موقع هاور دیو1 به همه تگ های img داخل دیو1 اعمال میشه.
واسه هاور دیو3 هم:
.div3:hover + .div2 img{}
وقتی دیو3 هاور شد برای دسترسی به المنت بعدی از کاراکتر + استفاده میکنیم و به دیو2 که داخلش img هست استایل میدیم.
<!doctype html>
<html>
<head>
<style>
*{margin: 0;padding: 0;}
.div1{background: #999;padding: 30px 40px;margin: 50px;}
.div1,.div2,.div3{float: left;}
.div2 {width: 320px;height: 240px;background: #ddd;}
.div3 {width: 320px;height: 240px;background: #ddd;}
.div1:hover
.div2 img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.div2:hover img, .div1:hover img, .div3:hover + .div2 img {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<img src="http://placehold.it/320x240" alt="Some awesome text"/>
</div>
<div class="div3">Div3</div>
</div>
</body>
</html>