Come posso fare che un collegamento img e text sia sia collegato allo stesso posto sia sia attivo su hover indipendentemente da quale sto passando?

Question

Vorrei essere in grado di passare il mouse sopra l'immagine invocare la proprietà hover sul collegamento di testo che si trova accanto ad essa.

Ho un'anteprima dell'immagine di un video e il nome del video scritto accanto ad esso come stringa di testo. Vorrei farlo in modo da poter passare con il mouse sull'immagine e fare in modo che il testo cambi ancora colore come un effetto al passaggio del mouse senza dover rendere l'immagine e il testo tutta un'immagine, per ovvi motivi di ricerca e usabilità; mantenendo il testo come testo ecc.

AGGIORNAMENTO: voglio anche assicurarmi che il link di testo che si trova ora nel " span " non puoi semplicemente spostarti utilizzando " margin-left " ma può essere sollevato. Per impostazione predefinita nel codice ho appena scende al livello della parte inferiore dell'immagine 60x60px. Lo voglio più in alto, quindi sembra carino ma "margin-bottom" non aiuta. lo voglio in " Altezza centrale " del 60x60 img ... non in fondo dove va di default.

Qualche idea? Grazie!

P.S. Sono aperto allo script java e alle idee jquery che alcuni hanno pubblicato qui, ma sono un principiante completo in questo e avrò bisogno di ulteriori spiegazioni. Preferisco i CSS.

il mio codice ora è:

il mio html è:

<div id="example">
  <a href="#">
    <img src="image/source_60x60px.jpg">
    <span class="video_text">Image Text</span>
  </a>
</div> 

il mio CSS è:

div#example         { float:left; width:358px; height:60px; margin-top:20px; }   
div#example a       { color:#B9B9B9; width:100%;}  
div#example a:hover { color:#67a; text-decoration:none;}  
span.videotext      { margin-left:80px;} 

Answer 1

Puoi farlo con CSS o Javascript. Senza conoscere il markup e come sono disposti gli elementi, non è possibile determinare quale sia l'opzione migliore.

Opzione CSS

a:hover span { color:red; }
<a href="1.html">
  <img src="1.jpg" />
  <span>Title: One</span>
</a>

In questo esempio, abbiamo il nostro testo e la nostra immagine entrambi all'interno di un link. Stiamo quindi modificando il colore del testo sull'evento: hover.

Javascript (jQuery)

div.hovered p { color:red; }

<div class="preview">
  <img src="1.jpg" />
  <p>Title: One</p>
</div>

$("div.preview img").hover(
  function () { $(this).parent().addClass("hovered"); },
  function () { $(this).parent().removeClass("hovered"); }
);

Questo esempio mostra una soluzione che aggiunge semplicemente una classe al contenitore padre, che a sua volta modifica la rappresentazione del titolo. Questo evento è controllato passando il mouse sull'immagine all'interno del contenitore.

Aggiornamento:

Posizionare il tuo testo non è così difficile. Il metodo semplice e veloce sarebbe quello di posizionare il contenitore principale con relativo e il testo con assoluto:

<div class="container">
  <a href="#">
    <img src="1.jpg" />
    <span class="title">Hello World</span>
  </a>
</div>

div.container            { position:relative; width:150px; }
div.container span.title { position:absolute; top:0; left:50px; width:100px; }

Questo è un rapido esempio. Puoi modificare i valori in base alle tue esigenze.

Answer 2

Che dire di

<style>
a 
{ 
    color: #000000; 
}
a:hover 
{ 
    color: #a9a9a9; 
}
</style>

<a href="#"><img src="imagepath" alt="Image Title" />&nbsp;Image Text</a>

Answer 3

Basato sulla risposta di Jonathan, ma per javascript se non usi jQuery:

<div onmousemove="hover('text1',true)" onmouseout="hover('text1',false)" >
  <img src="1.jpg" />
  <p id="text1">Title: One</p>
</div>

<script type="text/javascript">
function hover(elemID, on){
  element = document.getElementById(elemID);  
  if(on){
    element.style.color='red';
  }
  else
  {
    element.style.color='black';
  }
}
</script>

Answer 4

Le mie scuse. Ho letto male la tua domanda. Ecco un'altra pugnalata:

HTML

<div class="video">
    <a href="" title="title">
        <img alt="title" src="path/to/image" />
        Video Title
    </a>
</div>

CSS

    .video {
        line-height: 75px;
        margin: 10px;
        padding: 10px;
        width: 200px;   
    }
    .video img {
        float: left;
        margin-right: 15px; 
    }
    .video a:hover {
        color: #hexcol; 
    }
    .video:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden; 
    }

Ovviamente, ci sono alcuni stili qui che non ti servono ma li ho usati per testare in un browser. Se si desidera che il testo si allinei verticalmente con la miniatura del video, sarà necessario impostare la proprietà di altezza della linea alla stessa altezza dell'immagine della miniatura. Ciò spingerà il testo a metà del video.