40
Tôi muốn nó được đơn giản như này, nhưng tôi biết nó không phải là:Có cách nào để di chuột qua một phần tử và ảnh hưởng đến một phần tử khác không?
img {
opacity: 0.4;
filter: alpha(opacity=40);
}
img:hover {
#thisElement {
opacity: 0.3;
filter: alpha(opacity=30);
}
opacity:1;
filter:alpha(opacity=100);
}
Vì vậy, khi bạn di chuột qua img, nó thay đổi độ mờ đục của #thisElement tới 30% và thay đổi opacity của hình ảnh đến 100%. Có cách nào để thực sự làm điều này bằng cách sử dụng chỉ css?
Vì vậy, đây là HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="C:\Users\Shikamaru\Documents\Contwined Coding\LearningToCode\Learning jQuery\js\jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="briefcase.js"></script>
<link rel="stylesheet" type="text/css" href="taskbar.css"/>
<link rel="stylesheet" type="text/css" href="briefcase.css" />
<title>Briefcase</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div class="mask"></div>
<div class="float">
<div id="album1">Album Title</div>
<img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" />
<img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" />
<img class="left" src="mattWaterRun.jpg" alt="Photoshopped Matt" />
</div>
<div class="gradientTop"></div>
<div class="gradientBottom"></div>
</body>
</html>
Và đây là CSS:
body {
font: normal small/3em helvetica, sans-serif;
text-align: left;
letter-spacing: 2px;
font-size: 16px;
margin: 0;
padding: 0;
}
div.gradientTop {
position: absolute;
margin-top: 5px;
z-index: 2;
width: 206px;
height: 30px;
float: left;
background: -webkit-linear-gradient(rgba(255, 255, 255, 2), rgba(255, 255, 255, 0))
}
div.gradientBottom {
position: absolute;
margin-bottom: 5px;
z-index: 2;
width: 206px;
height: 120px;
float: left;
bottom: -210px;
background: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1))
}
div.float {
border-right: 1px solid orange;
position: absolute;
z-index: 2;
margin-left: 5px;
margin-top: 5px;
float: left;
width: 200px;
}
div.mask {
position: relative;
z-index: 1;
margin-top: 5px;
float: left;
width: 206px;
height: 805px;
background-color: white;
}
img.left {
z-index: inherit;
margin-bottom: 3px;
float: left;
width: 200px;
min-height: 200px;
/* for modern browsers */
height: auto !important;
/* for modern browsers */
height: 200px;
/* for IE5.x and IE6 */
opacity: 0.4;
filter: alpha(opacity=40)
}
img.left:hover + #album1 {
opacity: .4;
}
img.left:hover {
opacity: 1.0;
}
#album1 {
z-index: 2;
width: 200px;
color: white;
text-align: center;
position: absolute;
background: orange;
top: 70px;
}
liên quan: http://stackoverflow.com/questions/1462360/css-hover-one-element-effect-for-multiple-elements –