Newsgroup: it.comp.www.html
Titolo: hover di un'immagine e di un div dentro un altro div

 
Ho questo tipo di struttura:
 
<div>
   <a href="pagina.html">
      <img width="200" height="100" src="image.jpg">
   </a>
   <div>
      <a href="pagina.html">
   </div>
</div>
 
č possibile fare in modo che, passando il puntatore del
mouse sul div contenitore scatti un hover contemporaneamente
sul tag <a> e il div contenuti?
 
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente

 contenuti?
 
Non in HTML.
 
Spiega cosa vorresti che facesse l'hover, e magari c'è un'alternativa.
 
Bye.


 Spiega cosa vorresti che facesse l'hover, e magari c'è un'alternativa.
 
si vero, forse non sono stato molto chiaro.
In pratica, con i CSS si riesce a gestire l'effetto hover su
un'immagine o un link, ecco io vorrei gestire contemporaneamente
l'effetto hover di un'immagine ed di un link contenuti in un div.


 un'immagine ed di un link contenuti in un div.
 
Forse puoi fare qualcosa (dando delle classi ai div come ho fattto sopra, 
altrimenti rischi di spaccare tutto), così:
 
div.outer:hover > a { ... }
div.outer:hover > div.inner { ... }
 
Quindi non definisci più l'hover sugli elementi direttamente, ma sul 
padre.
 
Occhio che molti IE non supportano l'hover su elementi diversi da a, e 
IE6 non ricordo se supporta il >
 
Bye.


non so se intendi una cosa di questo genere:
 
 
 
 
<!DOCTYPE html>
<html lang="it">
<head>
        <meta charset="utf-8" />
        <title>Untitled</title>
 
<style>
 
a {
text-decoration:none;
color:blue;
}
 
img {border:none;}
 
</style>
 
<script>
 
function sottolinea(questo) {
document.getElementById(questo).style.textDecoration="underline";
document.getElementById(questo).style.color="red";
}
 
function toglisottolineatura(questo) {
document.getElementById(questo).style.textDecoration="none";
document.getElementById(questo).style.color="blue";
}
 
function fabordo(questo) {
document.getElementById(questo).style.border="solid 1px red";
document.getElementById(questo).style.padding="0";
}
 
function toglibordo(questo) {
document.getElementById(questo).style.borderStyle="none";
document.getElementById(questo).style.padding="1px";
}
 
</script>
 
</head>
<body>
 
<h1>
<a href="Link.html" id="link"
onmouseover="fabordo('immagine');
        sottolinea('link')"
onmouseout="toglibordo('immagine');
        toglisottolineatura('link')">Link.html</a>
</h1>
 
<img src="
http://www.google.it/images/srpr/logo11w.png
" id="immagine"
alt="logo Google"
onmouseover="fabordo('immagine');
        sottolinea('link')"
onmouseout="toglibordo('immagine');
        toglisottolineatura('link')">
 
</body>
</html>
 
 
 
passando il mouse o sul link o sull'immagine sono evidenziati
contemporaneamente tutti e due
 
può funzionare con qualunque elemento, io ho usato un link e un'immagine
perché l'ho preso da una pagina che avevo già pronta su un mio sito
 
 
-- 
Maurizio Pistone    strenua nos exercet inertia  Hor.
 
http://blog.mauriziopistone.it
 
 
http://www.lacabalesta.it
 
 
http://blog.ilpugnonellocchio.it
 


 perché l'ho preso da una pagina che avevo già pronta su un mio sito
 
ciao, si una cosa del genere. La tua soluzione è interessante ma
io cercavo un modo per fare più o meno la stessa cosa ma solo
tramite i CSS. Mi sembra che sia possibile in quanto su un sito
che purtroppo non riesco a rintracciare più l'effetto era dato
solo tramite CSS.


 IE6 non ricordo se supporta il >
 
IE6 fortunatamente è ormai preistoria del web ;)
