Einzelnen Beitrag anzeigen
  #2 (permalink)  
Alt 18.02.2011, 09:48
Ravelux Ravelux ist offline
Legen..wait for it..dary
neuer user
Thread-Ersteller
 
Registriert seit: 17.02.2011
Ort: Wien
Beiträge: 13
Ravelux befindet sich auf einem aufstrebenden Ast
Standard

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);
  });

Geändert von Ravelux (18.02.2011 um 10:32 Uhr)
Mit Zitat antworten
Sponsored Links