Jak zmienić jeden element podczas unosząc nad innym

Spojrzałem na kilka innych pytań, ale nie mogę wydawać się żadnego z nich, więc tutaj jest mój problem, chciałbym mieć div lub przęsła, po najechaniu nad nim pojawiłby się obszar, który wyglądałby jak spadek.Jak zmienić jeden element podczas unosząc nad innym

Takie jak mam div, a chcę się unosić nad nim i go pokazać pewne informacje na temat elementu I unosił się nad

<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>

Ale ta^nie robi wydaje się działać, nie wiem dlaczego. .. i jeśli istnieje sposób, aby to zrobić w css, chciałbym wiedzieć, ale chcę wszelkie sugestie.

Źródło

2011-12-23 Joshua Gottschalk

Zobacz moje komentarze na dole pytania. Jest tam także skrzypce. Jeśli opcja chnaging twojej struktury html jest opcją - http://stackoverflow.com/questions/6669147/css-change-two-links-when-hovering-over-either-one-of-them – Jawad

w jquery http: //jsfiddle.net/amkrtchyan/e8wJb/ –

Można to osiągnąć w CSS tylko wtedy, gdy ukryty div jest dzieckiem elementu użyć do zawisu:

http://jsfiddle.net/LgKkU/

Źródło

2011-12-23 09:52:49 ptriek

nie można wpłynąć element non-dziecko używając :hover od wewnątrz CSS2, która jest obsługiwany przez wszystkie popularne przeglądarki.

można wpływać element rodzeństwo użyciu selektorów CSS2.1, tak:

a:hover + .sibling { ... }

Jednak ta działa tylko dla bezpośrednich rodzeństwa. Oznacza to można mieć HTML tak:

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

Zauważ, że a i span są bezpośrednimi rodzeństwo.

Oto skrzypce przedstawiający rodzeństwo pracy: http://jsfiddle.net/vUUxp/

Jednak not all browsers support the CSS2.1 sibling selectors, więc musisz zdecydować, na podstawie swojej grupy docelowej, jeśli można użyć tego czy nie.

Edit: Poprawione mój błąd wersji CSS dla selektora +: to 2.1, który określa go, nie CSS3. Dodałem również link pokazujący obsługę przeglądarki. W przeciwnym razie odpowiedź jest taka sama.

Źródło

2011-12-23 09:55:54 OverZealous

Dostępne są również [selektory ogólne dla rodzeństwa] (https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors), ale działają one również tylko dla następnych elementy – spelufo

Lub, jeśli jesteś otwarty na to, użyj jQuery.

Coś jak to będzie działać:

$("#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 
    });

I pamiętaj, aby owinąć to w DOM gotowy funkcji ($(function(){...}); lub $(document).ready(function(){...});).

Źródło

2011-12-23 09:56:51 Purag

Jak zmienić jeden element podczas unosząc nad innym

Odpowiedz

Powiązane problemy