zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Einen Bereich per Mouseover ausblenden

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.01.2013, 16:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.01.2013
Beiträge: 9
BaldrianForte befindet sich auf einem aufstrebenden Ast
Standard Einen Bereich per Mouseover ausblenden

Hallo,

wir sitzen seit Tagen an einem Problem und finden leider keine Lösung:

Unter einem Button liegt ein Schatten, gleiche Größe, aber etwas versetzt.
Fährt man mit der Mouse über den Button, verändert sich dieser.
Soweit kein Problem. Aber wie blendet man per hover auch den Schatten aus?

Wir haben das im <head>-Bereich so gemacht:

HTML-Code:
<head>
#button1 {Formatierung; Position; Hintergrundbild;}
#schatten_zu_button1 {Formatierung; Position; Hintergrundbild;}
...
</head>
hover über #button1 soll #schatten_zu_button1 ausblenden

gibt es da was?
Danke+Gruß
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.01.2013, 16:37
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Warum hat der Button selber keinen Schatten? Amsonsten vllt. der "Nachfolgeselektor"? Ohne weiteren Code kann man dazu nichts sagen.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.01.2013, 16:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.01.2013
Beiträge: 9
BaldrianForte befindet sich auf einem aufstrebenden Ast
Standard

Ich wollte das hier nicht überfrachten. Ich versuche es auf das Wesentliche zu reduzieren:

HTML-Code:
<head> [..........]
#b1 { /*Der Button*/
        position: fixed;
        top:100px; left:100px; height:50px; width:100px;
        z-index: 5;
        background-image:url('../../images/button1.gif');
}
#b1:hover {/*Der Button verschiebt sich bei Mouseover*/
        left: 105;
        background-color: green;
        background-image:url('../../images/button2.gif');
}

#s1 { /*Der Schatten unter dem Button*/
        position:fixed;
        top:110px; left:110px; height:50px; width:100px;
        z-index: 4;
        background-image:url('../../images/shade-b.png')
}
[.......] 
</head>
<body>
<a title="Ein Hypertext-Verweis" href="http://www.google.de">
        <div id="b1"></div>
</a>
</body>
Mit Zitat antworten
  #4 (permalink)  
Alt 05.01.2013, 16:56
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von BaldrianForte Beitrag anzeigen
Ich wollte das hier nicht überfrachten. Ich versuche es auf das Wesentliche zu reduzieren:

HTML-Code:
<head> [..........]
#b1 { /*Der Button*/
        position: fixed;
        top:100px; left:100px; height:50px; width:100px;
        z-index: 5;
        background-image:url('../../images/button1.gif');
}
#b1:hover {/*Der Button verschiebt sich bei Mouseover*/
        left: 105;
        background-color: green;
        background-image:url('../../images/button2.gif');
}

#s1 { /*Der Schatten unter dem Button*/
        position:fixed;
        top:110px; left:110px; height:50px; width:100px;
        z-index: 4;
        background-image:url('../../images/shade-b.png')
}
[.......] 
</head>
<body>
<a title="Ein Hypertext-Verweis" href="http://www.google.de">
        <div id="b1"></div>
</a>
</body>
Es existiert nirgends ein Element mit der ID #s1. Neben dieser Tatsache darf ein Anker-Element keine Blockelemente beinhalten.

Am besten lädst du deinen bisherigen Verusch mal KOMPLETT bei einem FREEHOSTER hoch.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #5 (permalink)  
Alt 05.01.2013, 17:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.01.2013
Beiträge: 9
BaldrianForte befindet sich auf einem aufstrebenden Ast
Standard

Hallo, doch den gibt es, habe hier aber weg gelassen, weil der Schatten genau so angezeigt wird wie der Button.
Es geht um die prinzipielle Frage, wie man den Schatten unter dem Button, der im head-Bereich als #s1 bezeichnet ist, ausblendet. Der Button und der Schatten werden angezeigt durch:
(Auf JavaScript möchten wir verzichten)

HTML-Code:
<body>
[...]
<a title="Ein Hypertext-Verweis" href="http://www.google.de">
<div id="b1"></div>
</a>
<div id="s1"></div>
[...]
</body>
Weiterer Quellcode würde zu unnötiger Redundanz von Informationen führen. Mehr Infos gibt es zu den zwei Elementen nicht.

Geändert von BaldrianForte (05.01.2013 um 17:09 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 05.01.2013, 17:08
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von BaldrianForte Beitrag anzeigen
doch den gibt es, habe hier aber weg gelassen.
Es geht um die prinzipielle Frage, wie man den Schatten unter dem Button, der im head-Bereich als #s1 bezeichnet ist, weg kriegt.
Mit dem Markup was du zu Tage legt, ist es nicht möglich.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #7 (permalink)  
Alt 05.01.2013, 17:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.01.2013
Beiträge: 9
BaldrianForte befindet sich auf einem aufstrebenden Ast
Standard

Weiß jemand, wie man es anders besser machen kann?
Mit Zitat antworten
  #8 (permalink)  
Alt 05.01.2013, 17:20
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Ich erwähnte Eingangs bereits die Frage, wieso der Button serlber keinen Schatten hat (Stichwort CSS)
Du könntest natürlich auch das eine Element in das andere Element setzen und dann den Nachfolge-Selektor benutzen (Hey, das schrieb ich auch schon...)

Ebenfalls schrieb ich, Blockelemente in Nicht-Blockelementen unzulässig sind. (Das solltest du zuerst ändern)
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #9 (permalink)  
Alt 05.01.2013, 17:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.01.2013
Beiträge: 9
BaldrianForte befindet sich auf einem aufstrebenden Ast
Standard

Der Schatten soll eine bestimmte Farbe, eine bestimmte Transparenz und Position haben. Das lässt sich nur separat regeln, da nur der Button auf einen Mouseover reagieren soll, der Schatten selbst jedoch nicht. Der Schatten soll ausgeblendet werden, wenn die Maus über dem Button ist. Wir suchen nur eine Lösung ohne JavaScript für das obige Problem und möchten vom Design und Elementverhalten nicht abweichen.
Wir sind HTML und CSS-Newbies.

Du schreibst: "Ebenfalls schrieb ich, Blockelemente in Nicht-Blockelementen unzulässig sind."

Was genau heißt das in unserem Fall? Kannst Du in ein paar Zeilen beispielhaft coden?
Danke + Gruß

Geändert von BaldrianForte (05.01.2013 um 17:31 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 05.01.2013, 17:35
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von BaldrianForte Beitrag anzeigen
Der Schatten soll eine bestimmte Farbe, eine bestimmte Transparenz und Position haben. Das lässt sich nur separat regeln, da nur der Button auf einen Mouseover reagieren soll, der Schatten selbst jedoch nicht. Der Schatten soll ausgeblendet werden, wenn die Maus über dem Button ist. Wir suchen nur eine Lösung ohne JavaScript für das obige Problem und möchten vom Design und Elementverhalten nicht abweichen.
Wir sind HTML und CSS-Newbies.

Du schreibst: "Ebenfalls schrieb ich, Blockelemente in Nicht-Blockelementen unzulässig sind."

Was genau heißt das in unserem Fall? Kannst Du in ein paar Zeilen beispielhaft coden?
Danke + Gruß
Zunächst ein Hinweis: Wenn jemand auf einen Post antwortet, muss dieser dann nicht noch bearbeitet werden.

Ein Forum bietet Hilfe zur selbsthilfe. Wenn "ihr" "Newbies" seit, solltet ihr euch erstmal mit den Basics beschäftigen. (Stichwort Little-Boxes)

Der Beispielhafte Code ist ganz einfach, da benutze ich deinen Code:
HTML-Code:
<a title="Ein Hypertext-Verweis" href="http://www.google.de">
        <div id="b1"></div>
</a>
DAS ist nicht zulässig. Ein Blockelement (wie das div) darf nicht in einem Inline-Element (dem a) liegen. So einfach.

Hier noch der eben gelöschte Inhalt:
Dann nutze meine 2. Möglichkeit. Anders geht es nicht. Was auch daran liegt, das der Button ja nicht das b1 ist, sondern der Anker der Button ist.

CSS kennt keinen Elternselektor. Und von JavaScript schrieb bisher auch keiner was.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
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
per JS eingeblendete Elemente im Druck ausblenden uspri CSS 6 09.11.2009 15:04
generierte Elemente per CSS vom Druck ausblenden uspri Javascript & Ajax 19 15.05.2009 15:54
Lightbox per MouseOver Swiper Javascript & Ajax 0 11.12.2008 19:03
Mouseover per javascipt ändern mike-b CSS 11 27.11.2007 14:28
MouseOver - DIV einblenden und DIV ausblenden, läuft nicht im IE 6! NicolaibassDH CSS 2 05.03.2007 15:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:13 Uhr.