XHTMLforum - Hover-Effekt bei 2 div-Boxen

XHTMLforum (http://xhtmlforum.de/index.php)

- Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)

- - Hover-Effekt bei 2 div-Boxen (http://xhtmlforum.de/showthread.php?t=63849)

Hover-Effekt bei 2 div-Boxen

Ich habe folgenden Code:

CSS:

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:

<body bgcolor="#d5d5d5">

      <div class="box1">

        <div class="box2">

                       <div class="box2text">TEXT<br> TEXT</div>

        </div>

          <div class="box3"></div>

          <div class="box4">

                   <div class="arrow"></div>

                   <div class="box4text"><a class="link" href="#1">TEXT</a></div>

          </div>

        </div>

      </div>

      

</body>

Ich möchte nun durch jQuery(?) folgendes erreichen:
Fahre ich mit der Maus über box1-4 dann soll sich erstens die Eigenschaft background-color von Box1 als auch von Box 4 ändern.

Ich hoffe ihr könnt mir da weiterhelfen, da hänge ich derzeit.

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

  });