• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

hover-Effekt bei verschachtelten Elementen abschalten?

B

BaldrianForte

Neues Mitglied
Hallo,

ich habe zwei Boxen.
Ich lege auf Box1 einen hover-Effekt, der Box2 ausblendet.
Dazu muss Box2 in Box1 verschachtelt sein.

HTML: 
<head>[...]
<style type="text/css">
.gr    {position: fixed; width:100px; height:50px;}
.b1     {top:100px; background-color: blue;}
.b2     {top:130px; background-color: black; left: 20px; z-index:-1; }
.b1:hover .b2 {display:none}
</style>
</head>

<body>
  <div class="gr b1">
    <div class="gr b2"></div>
  </div>
</body>

Aber Box2 verschwindet leider auch, wenn ich per mouseover über Box2 bin.

Ich könnte über Box2 eine transparente Box3 legen, die kein Kind von Box1 ist.
Dann wäre das Problem gelöst.

Wenn aber Box2 als Schatten teilweise unter Box1 liegt (überlappt wird), klappt das nicht.

Gibt es eine Möglichkeit, auf Box2 einen hover-Effekt zu legen, der den hover-Effekt von Box1, dem Elternelement, überlagert?

Oder gibt es einen anderen Trick ohne JavaScript, das Verhalten beim hovern über Box2 zu ändern oder das hovern bei verschachtelten Elementen zu verhindern bzw zu deaktivieren?

In einem anderen Forum wird gesagt, dass es per reinem CSS nicht geht. Ich bin trotzdem noch an einer anderen Meinung interessiert.
 
Wenn man beim Hovern über Element x einen Effekt auf Element y auslösen will, warum sollte man dann keine JavaScript verwenden?

Aber vielleicht wäre es sinnvoller, zu erläutern, was du mit deinem Div-Konstrukt eigentlich bezwecken willst. Von deinem posting her klingt es so, als wolltest du mit dem zweiten Div einen box-shadow simulieren, und eine solche CSS-Anweisung:

Code: 
.b1:hover .b2 {display:none}

macht nicht wirklich Sinn.
 
Mh, man könnte auch fragen. Warum JavaScript verwenden, wenn es sich mit CSS lösen lässt? ^^
Persönliche Vorliebe. Außerdem werden vom Browser keine Fragen gestellt oder Warnungen ausgegeben.

Eine Lösung des Problems ist, Box2 in eine unsichtbare Box3 zu stecken, die wiederum in Box1 enthalten ist.
So lässt sich Box2 über Box3 die hover-Eigenschaft "bleibe sichtbar" zuweisen.

Eine andere Methode wäre, den überstehenden Schatten mit zwei anderen Boxen zu überdecken.

Zu Deiner Antwort: Du hast recht
HTML: 
.b1:hover .b2 {display:none}
macht keinen Sinn. (Das Bild zittert, wenn man die Maus über Box2 bewegt, weil Box2 ständig ein- und ausgeblendet werden muss)
Besser ist
HTML: 
<head>[...]
<style type="text/css">
.gr     {position: fixed; width:100px; height:50px;}
.b1     {top:100px; background-color: blue;}
.b2     {top:130px; background-color: black; left: 20px; z-index:-1; }
.b1:hover .b2 {display:block; background-color:transparent;}
.b3:hover .b2 {display:block; background-color:black;}
</style>
</head>
<body>  
  <div class="gr b1">
      <div class="gr b2 b3">
          <div class="gr b2"></div>
      </div>
  </div>
</body>

Der Quellcode ist nur ein Prototyp, eine Machbarkeitsstudie ^^ sozusagen ;)
 
Zuletzt bearbeitet:
Keine Ahnung was du damit willst, aber so ginge es.
Code: 
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">

.gr {
  position:relative;
  width:100px; 
  height:50px;
 
  float:left;
}

.b1 {
  background-color: #ddd;
  height:20px;
}

.b2 {
  position:absolute;
  top:5px;
  left:5px;
  right:-5px;
  height:20px;
  background-color: #555;
  z-index:-1;
}

.gr .b1:hover + .b2 {
  display:none
}



</style>
</head>

<body>
  <div class="gr">
  <div class="b1"></div>
  <div class="b2"></div>
 </div>


</body>
</html>

Wobei :after vielleicht besser wäre.

@edit
Um die nächste Frage vorzubeugen. Hier mit :after

Code: 
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">

.gr {
  width:100px; 
  height:50px;
  float:left;
}

.b1 {
  position:relative;
  background-color: #ddd;
  height:20px;
}

.b1:after {
  content:"";
  position:absolute;
  top:5px;
  left:5px;
  right:-5px;
  height:20px;
  background-color: #555;
  z-index:-1;
}

.gr .b1:hover:after {
  display:none
}



</style>
</head>

<body>
  <div class="gr">
  <div class="b1"></div>
  </div>


</body>
</html>

@edit
Ach und wenn es sich, wie Tronjer vermutet, um ein Schatten handelt, dann ist es mir - box-shadow - natürlich am einfachsten.
Code: 
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">

.gr {
  float:left;
  padding:20px;
  height:50px;
  background:#ddd;
  box-shadow:15px 15px 0 #000;
}

.gr:hover {
 box-shadow:none;
}

</style>
</head>

<body>
  <div class="gr">Hoverschatten</div>
</body>
</html>

So. Und nun sollte alles geklärt sein. Oder?
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben