Wie man mit CSS ein Element ändert, während man mit der Maus über ein anderes fährt

Question 1

Ich habe mir mehrere andere Fragen angesehen, aber ich kann keine davon herausfinden, also ist hier mein Problem: Ich hätte gerne eine div oder ein spanwenn Sie den Mauszeiger darüber bewegen, erscheint ein Bereich und wäre wie ein Dropdown.

Wie ich eine habe divund ich möchte den Mauszeiger darüber bewegen und einige Informationen zu dem Element anzeigen lassen, über das ich den Mauszeiger bewegt habe

<html>
<head>
<title>Question1</title>
<styles type="css/text">

  #cheetah {
      background-color: red;
      color: yellow;
      text-align: center;
  }

  a {
      color: blue;
  }

  #hidden {
      background-color: black;
   }

   a:hover > #hidden {
      background-color: orange;
      color: orange;
  }
</styles>

</head>
<body>
  <div id="cheetah">
     <p><a href="#">Cheetah</a></p>
  </div>
  <div id="hidden">
     <p>A cheetah is a land mammal that can run up 2 60mph!!!</p>
  </div>
</body>
</html>

Aber das ^ scheint nicht zu funktionieren, ich weiß nicht warum … und ob es eine Möglichkeit gibt, das in CSS zu tun, würde ich gerne wissen, aber ich möchte alle Vorschläge.

Question 2

Sie können dies in CSS nur erreichen, wenn das versteckte div ein untergeordnetes Element des Elements ist, das Sie zum Schweben verwenden:

http://jsfiddle.net/LgKkU/

Question 3

Sie können ein Nicht-Kind-Element nicht mit beeinflussen :hover aus CSS2 heraus, das von allen gängigen Browsern unterstützt wird.

Sie können ein Geschwisterelement mit CSS2.1-Selektoren wie folgt beeinflussen:

a:hover + .sibling { ... }

Dies funktioniert jedoch nur für direkte Geschwister. Dies bedeutet, dass Sie HTML wie folgt haben könnten:

<p><a href="#">Cheetah</a> <span class="sibling">Blah Blah Blah</span></p>

Beachten Sie, dass die a und das span sind direkte Geschwister.

Hier ist eine Geige, die die Geschwister bei der Arbeit zeigt: http://jsfiddle.net/vUUxp/

Jedoch, nicht alle Browser unterstützen die gleichgeordneten CSS2.1-Selektorenalso müssen Sie basierend auf Ihrer Zielgruppe entscheiden, ob Sie dies verwenden können oder nicht.

Bearbeiten: Korrigierte meinen Fehler in der CSS-Version für die + Selektor: Es ist 2.1, das es definiert, nicht CSS3. Ich habe auch einen Link hinzugefügt, der die Browserunterstützung zeigt. Ansonsten ist die Antwort die gleiche.

Question 4

Oder, wenn Sie dafür offen sind, verwenden Sie jQuery.

So etwas würde funktionieren:

$("#element") // select your element (supports CSS selectors)
    .hover(function(){ // trigger the mouseover event
        $("#otherElement") // select the element to show (can be anywhere)
            .show(); // show the element
    }, function(){ // trigger the mouseout event
        $("#otherElement") // select the same element
            .hide(); // hide it
    });

Und denken Sie daran, dies in eine DOM-fähige Funktion ($(function(){...}); oder $(document).ready(function(){...});).

Question 5

Sie können dies jetzt in CSS3 absolut tun, indem Sie die verwenden ~ benachbarter Geschwisterselektor.

triggerSelector:hover ~ targetSelector {
    display: block;
}

Wenn Sie beispielsweise möchten, dass ein Tooltip angezeigt wird, wenn Sie den Mauszeiger über eine benachbarte Schaltfläche bewegen:

.button:hover ~ .tooltip {
    display: block;
}