zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Hover-Effekt bei 2 div-Boxen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.02.2011, 16:24
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 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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.02.2011, 08:48
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 09:32 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 16:53
Header entfernen tripple CSS 17 15.06.2010 15:41
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 10:59
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 19:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:59 Uhr.