Herzlich Willkommen, lieber Gast!
  Sie befinden sich hier:

  Forum » HTML / XML / XHTML » CSS Text hover nur auf Text beschränken

Forum | Hilfe | Team | Links | Impressum | > Suche < | Mitglieder | Registrieren | Einloggen
  Quicklinks: MSDN-Online || STL || clib Reference Grundlagen || Literatur || E-Books || Zubehör || > F.A.Q. < || Downloads   

Autor Thread - Seiten: > 1 <
000
27.12.2015, 18:09 Uhr
~newbie001
Gast


Hi,

ich habe ein kleines Verständnissproblem beim folgenden:

Code:

#test
{
    width: 200px;
    height: 890px;
    position: absolute;
    text-align: left;
}

#test p
{
    color: grey;
    font-size: 14px;
    margin-left: 30px;
    font-weight: bold;
    cursor: pointer;
}
#test p:hover
{
    color: red;
}



Jetzt ist es so, das es beim MouseOver auch rot angezeigt wird, allerdings schon bei der vollen Breite des divs "#test".
Wenn ich also nur "TEST" im p-Tag stehen habe, habe ich den MouseOver-Effekt trotzdem auch daneben, die vollen 200px halt.

Was muss ich tun, damit der MouseOver-Effekt nur über dem Text ist?
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
001
28.12.2015, 08:59 Uhr
FloSoft
Medialer Over-Flow
(Administrator)


Hi,
welchen Browser benutzt du? die Hover-Effekt-Areas werden je nach Browser unterschiedlich ausgewertet
--
class God : public ChuckNorris { };
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
002
28.12.2015, 21:59 Uhr
~newbie001
Gast


Hi, ich benutze Firefox.

Wie sehen denn die anderen Browser das? Gibt es eine "universelle" Lösung?
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
003
29.12.2015, 15:43 Uhr
FloSoft
Medialer Over-Flow
(Administrator)


Hi,

meistens funktionieren die hover effekte nur für den kompletten (ggf übergeordneten) <div> (so wie du es auch erlebt hast) bzw <a> korrekt

siehe z.B

www.css4you.de/hover.html
--
class God : public ChuckNorris { };
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
004
29.12.2015, 18:04 Uhr
~newbie001
Gast


Ok. habe ich mir schon gedacht. Ich werde mir was anderes einfallen lasse...
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
005
01.01.2016, 20:10 Uhr
~newbie001
Gast


Hi,

ich bins wieder. Ich wollte euch mal Fragen, ob es so ok wäre:


Code:

#test
{
    width: 200px;
    height: 890px;
    position: absolute;
    text-align: left;
}

#test p
{
    color: grey;
    font-size: 14px;
    margin-left: 30px;
    font-weight: bold;
    cursor: pointer;
}
#test span
{cursor: pointer;}

#test span:hover
{color: red;}



Es würde dann so sein:

Code:

<p><span>TEXT</span></p>



So funktioniert es einwandfrei. Jedoch würde ich von euch gerne wissen, ob man es auch so stehen lassen kann, oder ob es schwachsinnig ist und es eine bessere Lösung gibt?
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
006
08.02.2016, 19:57 Uhr
toi



Wusste gar nicht, dass dies browserabhängig ist...
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
Seiten: > 1 <     [ HTML / XML / XHTML ]  


ThWBoard 2.73 FloSoft-Edition
© by Paul Baecher & Felix Gonschorek (www.thwboard.de)

Anpassungen des Forums
© by Flo-Soft (www.flo-soft.de)

Sie sind Besucher: