EDIT:
Habe es mit jQuery hinbekommen
Tipps sind noch immer willkommen.
Code:
.box1;
margin: auto;
margin-top: -8px;
width: 246px;
height: 189px;}
.box2 {
padding-top: 5px;
margin-top: 10px;
margin-left: 10px;
margin-right: 6px;
width: 224px;
height: 32px;}
.box2text {
font-size: small;
line-height: 15px;
font-weight: bold;
color: #cf310a;}
.box3 {
background: url('images/1_active.gif');
margin-left: 10px;
margin-right: 6px;
height: 111px;
width: 224px;
}
.box4 {
background-color: #ddd;
margin-left: 10px;
margin-right: 6px;
width: 224px;
height: 18px;}
.box4text {
margin-left: 20px;}
.arrow {
float: left;
margin-left: 6px;
margin-top: 6px;
width: 8px;
height: 8px;
background: url('images/arrow.gif');
background-repeat: no-repeat;}
.link{
margin-left: -3px;
line-height: 18px;
color: #000;
font-size: small;
font-weight: bold;
text-decoration: none;}
.link:hover {
text-decoration: underline;}
HTML:
HTML-Code:
<div class="box1" id="box1">
<div class="box2">
<div class="box2text">ANNUAL REPORT<br> AND FORM 20-F 2010</div>
</div>
<div class="box3"></div>
<div class="box4">
<div class="arrow"></div>
<div class="box4text"><a class="link" href="#1">ONLINE SINCE 10, 2010</a></div>
</div>
</div>
</div>
Script:
Code:
$(".box1").hover(function () {
$(".box4").css({'background-color' : '#f8db3f', 'font-weight' : 'bolder'});
$(".box1").css({'background-color' : '#f4d312', 'font-weight' : 'bolder'});
}, function () {
var cssbox1 = {
'background-color' : 'transparent'
}
var cssbox4 = {
'background-color' : '#ddd'
}
$(".box4").css(cssbox4);
$(".box1").css(cssbox1);
});