CSS-Hover-Trigger der unterlegenden Ebene und der obersten Ebene

So erstellen Sie einen CSS-Hover-Übergang für beide Ebenen. Ich habe die ganze Seite geschrieben, so dass Sie es von Ihrem Computer-Desktop aus kopieren (einfügen) können. Was ich habe funktioniert, aber kann es ohne Javascript/jQuery mit reinem CSS gemacht werden? Ich habe es mit CSS-Pointer-Events probiert und konnte entweder die oberste Ebene (#circleOuter) oder die darunterliegende Ebene (#circleInner), aber nicht beide Ebenen umwandeln. Damit dies funktioniert, muss #circleOuter: hover # circleInner auslösen. Jede Hilfe wird geschätzt.CSS-Hover-Trigger der unterlegenden Ebene und der obersten Ebene

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
     $(document).ready(function(){ 
      $("#circleOuter").hover(function(){ 
       $("#circleInner").css("transform","rotate(180deg)"); 
       $("#circleOuter").css("transform","rotate(-180deg)"); 
      }, function(){ 
       $("#circleInner").css("transform","rotate(0deg)"); 
       $("#circleOuter").css("transform","rotate(0deg)"); 
      }); 
     }); 
     </script> 
     <style> 
      #circleWrap 
       { 
       background:#ff0; 
       width:200px; 
       height:200px; 
       position:relative; 
       } 

      #circleInner 
       { 
       background:url(http://socalsky.com/_/images/mis/circle_inner.png) center center/ 188px 188px no-repeat; 
       width:200px; 
       height:200px; 
       position:absolute; 
       transform: rotate(0deg); 
       transition: 500ms ease all; 
       } 

      #circleOuter 
       { 
       background:url(http://socalsky.com/_/images/mis/circle_outer.png) center center/ 200px 200px no-repeat; 
       width:200px; 
       height:200px; 
       position:absolute; 
       transform: rotate(0deg); 
       transition: 500ms ease all; 
       } 
     </style> 
    </head> 
    <body> 

     <div id="circleWrap"> 
      <div id="circleInner"> 
      </div> 
      <div id="circleOuter"> 
      </div> 
     </div> 

    </body> 
</html>

Quelle

2017-04-17 Kobbe

Basierend auf dem aktuellen Beispiel, das ich sehe nicht die Notwendigkeit, die Veranstaltung auf schweben die #circleOuter:hover auszulösen, wenn beide Elemente die Größe des Behälters und Trigger sind gleichzeitig verwenden nur die Eltern es auslösen:

#circleWrap { 
 
    background: #ff0; 
 
    width: 200px; 
 
    height: 200px; 
 
    position: relative; 
 
} 
 

 
#circleInner { 
 
    background: url(http://socalsky.com/_/images/mis/circle_inner.png) center center/ 188px 188px no-repeat; 
 
    width: 200px; 
 
    height: 200px; 
 
    position: absolute; 
 
    transform: rotate(0deg); 
 
    transition: 500ms ease all; 
 
} 
 

 
#circleOuter { 
 
    background: url(http://socalsky.com/_/images/mis/circle_outer.png) center center/ 200px 200px no-repeat; 
 
    width: 200px; 
 
    height: 200px; 
 
    position: absolute; 
 
    transform: rotate(0deg); 
 
    transition: 500ms ease all; 
 
} 
 
#circleWrap:hover #circleInner{ 
 
    transform: rotate(180deg); 
 
} 
 
#circleWrap:hover #circleOuter{ 
 
    transform: rotate(-180deg); 
 
}

<div id="circleWrap"> 
 
    <div id="circleInner"> 
 
    </div> 
 
    <div id="circleOuter"> 
 
    </div> 
 
</div>

Quelle

2017-04-17 16:10:36 DaniP

Klingt wirklich gut zu DaniP, werde versuchen dies aswel, gib mir ein paar, um all das auszuprobieren. Vielen Dank! – Kobbe

Es ist wahrscheinlich ein Jahr her, seit eine Frage gestellt wurde. Wie markiere ich die Antworten wieder als richtige Antworten? – Kobbe

@Kobbe Sie sehen ein Häkchen in grau unter den Stimmen auf der linken Seite der Antwort, die Sie markieren möchten – DaniP

das funktionierte für mich. prüfe den Plunkr raus. mit reinem CSS getan --->https://plnkr.co/edit/FQkBWUNJ79q43eknO7p9?p=preview

#circleWrap:hover>#circleInner{ 
transform: rotate(180deg); 
} 

#circleWrap:hover>#circleOuter{ 
transform: rotate(-180deg); 
}

Quelle

2017-04-17 16:09:38 lhavCoder

In Ordnung, werde dies jetzt versuchen. Danke ihavCoder. – Kobbe

sicher :) es sollte gut funktionieren – lhavCoder

Vielen Dank für Ihre Hilfe. – Kobbe

knapp unter css hinzufügen und jquery entfernen.

#circleWrap:hover>#circleInner 
    { 
    transform: rotate(180deg); 
    transition: 500ms ease all; 
    } 

    #circleWrap:hover>#circleOuter 
    { 
    transform: rotate(-180deg); 
    transition: 500ms ease all; 
    }

Quelle

2017-04-17 16:12:33

Vielen Dank für Ihre Hilfe. – Kobbe

mein Vergnügen @Kobbe –

CSS-Hover-Trigger der unterlegenden Ebene und der obersten Ebene

Antwort

Verwandte Themen