|
|||
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> gibt es da was? Danke+Gruß |
Sponsored Links |
|
||||
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? |
Sponsored Links |
|
|||
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> |
|
||||
Zitat:
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? |
|
|||
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> Geändert von BaldrianForte (05.01.2013 um 17:09 Uhr) |
|
||||
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? |
|
||||
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? |
|
|||
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) |
Sponsored Links |
|
||||
Zitat:
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> 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? |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |