Comment puis-je faire une img et le texte du lien à la fois lien vers le même endroit et à la fois devenir actif sur le vol stationnaire indépendant de celui que je suis planant au-dessus?

Je voudrais être en mesure d'avoir du survol de l'image invoquer le hover de propriété sur le texte du lien qui est juste à côté.

J'ai un aperçu de l'image d'une vidéo et de la vidéo nom écrit à côté de lui comme chaîne de texte. J'aimerais le faire donc je peux passez la souris sur l'image et de rendre le texte encore changer de couleur comme un hover effet, sans avoir à faire l'image et le texte tous une image , pour d'évidentes de la recherche et de la convivialité raisons, garder le texte en tant que texte etc.

Mise à JOUR: je veux aussi assurez-vous que le lien de texte qui est maintenant dans le "span" ne peut pas simplement de vous déplacer à l'aide de "margin-left", mais peut être augmentée jusqu'. Par défaut dans le code je l'ai juste gouttes au niveau de la partie inférieure de la 60x60px image. Je tiens plus en place tellement il a l'air sympa mais "margin-bottom" n'aide pas. je le veux dans le "Centre de hauteur" de la 60x60 img... pas au fond d'elle où elle passe par défaut.

Des idées? merci!

p.s. Je suis ouvert à la java script et jquery idées certaines posté ici, mais je suis un débutant complet, et auront besoin de plus d'explication. Je préfère CSS.

mon code est maintenant:

mon code html est:

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

mon css est:

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;}
wow je ne savais pas que vous pouviez avoir un sujet/titre en long sur LE!

OriginalL'auteur Jonn | 2009-09-10

  1. 3

    Vous pouvez le faire avec du CSS ou de Javascript. Sans connaître votre balise, et la façon dont les éléments sont disposés, il n'est pas possible de déterminer quelle est la meilleure option.

    CSS Option

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

    Dans cet exemple, nous avons notre texte et de l'image à la fois au sein d'un lien. Nous sommes ensuite modifier la couleur du texte sur le :hover événement.

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

    Cet exemple présente une solution qui ajoute simplement une classe au conteneur parent, qui à son tour modifie la représentation du titre. Cet événement est contrôlée par survol de l'image dans le conteneur.

    Mise à jour:

    Le positionnement de votre texte n'est pas si difficile. Le rapide-et-facile méthode pour positionner le conteneur parent avec une relative, et le texte avec l'absolu:

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

    Qu'un exemple rapide. Vous pouvez modifier les valeurs à vos besoins.

    Comme je l'ai dit, "phoenix" ci-dessus - votre réponse est similaire à la leur, mais de plus près, mais pas encore parfait. c'est ce que je suis désireux ( c'est à dire le lien de texte change de couleur sur le vol stationnaire au dessus de l'image ainsi que le lien vers le texte ), mais l'image est un 60x60px img et le texte, peu importe ce qui arrive droit dans le coin inférieur droit de l'image. Je veux que le texte soit environ 40 pixels sur la droite de l'img et à mi-chemin en bas de la 60x60px de sorte qu'il s'aligne bien. Le "span idée", présenté par vous travaille donc je peux faire le lien texte déplacer avec une marge à gauche, mais c'est encore à la ligne du bas à côté de l'img
    suite: Avoir à se déplacer au-dessus avec la marge de gauche est utile, mais j'ai encore besoin de se déplacer à regarder à droite margin-bottom ne fait rien. Des idées? Je ne suis pas sûr de la façon d'utiliser le jquery vraiment que je suis un newb donc je préfère css, si je peux. mon code html: <div id="exemple"> <a href="#"><img src="image/source_60x60px.jpg"><span class="video_text">Texte</span></a> </div> mon css: div#exemple {float:left; width:358px; height:60px; margin-top:20px; } div#exemple d'un { couleur:#B9B9B9; width:100%;} div#exemple a:hover {color:#67a;text-decoration:none;} span.télétexte {margin-left:80px;}
    J'ai mis à jour ma solution pour inclure des informations de positionnement de vos titres.
    Jonathan - VOUS ÊTES l'HOMME de LA! Qui a très bien fonctionné! Je n'ai jamais vraiment eu une prise ferme sur les différents types de positionnement. Je n'ai eu qu'à les utiliser dans des circonstances limitées et n'a jamais eu une réelle utilité pour le positionnement absolu, dans mon expérience limitée. Je n'ai jamais vraiment compris ce que le positionnement relatif a été basé sur la description, mais maintenant que j'ai utilisé absolue avec son élément parent comme "élément clé" de toutes sortes relatives... il fait tellement plus de sens! merci beaucoup!

    OriginalL'auteur Sampson

  2. 3

    Ce sujet

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

<a href="#"><img src="imagepath" alt="Image Title" />&nbsp;Image Text</a>
    c'est ce que je suis désireux ( c'est à dire le lien de texte change de couleur sur le vol stationnaire au dessus de l'image ainsi que le lien vers le texte ), mais l'image est un 60x60px img et le texte, peu importe ce qui arrive droit dans le coin inférieur droit de l'image. Je veux que le texte soit environ 40 pixels sur la droite de l'img et à mi-chemin en bas de la 60x60px de sorte qu'il s'aligne bien. Le "span idée", présenté par Jonathan Sampson ci-dessous aide un peu... mais encore finit un peu court. Je vais vous expliquer. merci bien!
    essayez d'utiliser la propriété line-height pour ajuster le texte à la position verticale. Si vous utilisez une ligne de hauteur égale à la hauteur de l'image, alors il devrait être centrée verticalement.

    OriginalL'auteur rahul

  3. 0

    Basé sur la réponse de Jonathan, mais pour javascript si vous n'utilisez pas de 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>

    OriginalL'auteur awe

  4. 0

    Mes excuses. J'ai mal lu votre question. Voici un autre coup de couteau à elle:

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

    Évidemment, il y a certains styles ici que vous n'avez pas besoin, mais je les ai utilisés pour tester dans un navigateur. Si vous voulez que votre texte à aligner verticalement avec votre miniature de la vidéo, vous devez définir la propriété line-height à la même hauteur que la vignette de l'image. Qui va pousser le texte au milieu de la vidéo.

    non, cela ne fonctionne pas. L'image ne fait pas partie de la liaison de la façon dont vous le mettez en place. aussi: il n'a pas aider à quoi que ce soit avec le lien de texte problème; c'est à dire qu'il soit coincé au niveau des pieds de l'image à côté. Il peut encore être déplacée à l'aide de la "margin-left" et ne peut pas être levé. merci bien.
    S'adapter au-dessus de quelque chose qui s'apparente à .video img:hover, .video img:hover + a {/* styles */} je ne suis pas sûr de savoir comment appliquer :hover à la img si l'utilisateur :hovers sur le <a>, cependant.

    OriginalL'auteur Lark