17.02.2011, 16:24
|
|||
|
|||
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-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> 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. 
|
| Sponsored Links |
|
18.02.2011, 08:48
|
|||
|
|||
|
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-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> 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)
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ä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 |
Linear-Darstellung
