← HTML + CSS

Como uma class pode influenciar outra

Lida 11641 vezes

Offline

frsantos 
Membro
Mensagens 1458 Gostos 0
Troféus totais: 35
Trófeus: (Ver todos)
Linux User Mobile User Apple User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter

Bom dia,

tenho várias classes

Código: [Seleccione]
<div id="AAA">
<div class="link-um"><a href="#">numero 1</a></div>
<div class="link-dois"><a href="#">numero 2</a></div>
<div class="link-tres"><a href="#">numero 3</a></div>
</div>

<div id="BBB">
<div class="um"><a href="#">numero um</a></div>
<div class="dois"><a href="#">numero dois</a></div>
<div class="tres"><a href="#">numero tres</a></div>
</div>

Eu queria que ao passar o rato nas classes da div AAA fosse mostrada na DIV BBB a classe correspondente.

exemplo: passo o rato na class link-1 na DIVAAA e é mostrada a class um na DIV BBB
Offline

Luís Marquês 
Membro
Mensagens 1430 Gostos 19
Feedback +27

Troféus totais: 24
Trófeus: (Ver todos)
Apple User Windows User Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1

Podes fazer algo do género por jQuery.

Para apanhares o nome da class onde estas a fazer hover utiliza o .attr
http://api.jquery.com/attr/

Depois é só fazer display: none e block as divs ;)
Offline

Telmo Marques 
Membro
Mensagens 31 Gostos 0
Troféus totais: 13
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 2 Level 1 10 Posts First Post Karma Fourth year Anniversary

Com a estrutura do documento exatamente como mostras não penso que seja possível apenas com CSS.

Alterando a #BBB para que seja descendente da #AAA torna-se possível mas muito pouco escalável. Seria mais escalável caso as div's a mostrar fossem descendentes do elemento onde se efetua a acção.

Exemplo só com CSS: http://jsfiddle.net/Js75s/
Exemplo mais escalável: http://jsfiddle.net/eFyys/

Se nenhuma destas soluções agradar o melhor é mesmo ir pela via do JavaScript :)
Offline

frsantos 
Membro
Mensagens 1458 Gostos 0
Troféus totais: 35
Trófeus: (Ver todos)
Linux User Mobile User Apple User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter

muito obrigado ;)