Comment puis-je faire un lien img et le texte à la fois lien au même endroit et les deux deviennent actifs sur indépendants de vol stationnaire dont je suis un planant au-dessus?

voix
3

Je voudrais être en mesure d'avoir en vol stationnaire au-dessus de l'image invoquer la propriété hover sur le lien texte qui est trop à côté de lui.

J'ai un aperçu de l'image d'une vidéo et le nom de la vidéo écrite à côté de lui en tant que chaîne de texte. Je voudrais faire en sorte que je puisse planer sur l'image et rendre le texte encore changer de couleur comme un effet de vol stationnaire sans avoir à faire l'image et le texte tout une image, pour des raisons évidentes de recherche et de convivialité; en gardant le texte sous forme de texte, etc.

MISE À JOUR: Je veux également vous assurer que le lien de texte qui est maintenant dans la « durée » ne peut pas se déplacer en utilisant un peu plus « marge gauche », mais peut être ressuscité. Par défaut dans le code que je l'ai tombe juste au niveau du fond de l'image 60x60px. Je veux plus haut donc il semble agréable, mais « margin-bottom » ne permet pas. je veux dans la « hauteur Centre » du 60x60 img ... pas au fond de celui-ci où il va par défaut.

Des idées? Merci!

ps Je suis ouvert au script java et des idées jquery certains posté ici, mais je suis un débutant complet à ce besoin et je explication supplémentaire. Je préfère CSS.

mon code est maintenant:

mon 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;} 
Créé 10/09/2009 à 11:59
source utilisateur
Dans d'autres langues...                            


4 réponses

voix
3

Vous pouvez le faire avec CSS, ou avec Javascript. Sans connaître votre balisage, et comment vos éléments sont disposés, il est impossible de déterminer quelle option est la meilleure.

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 dans un lien. Nous sommes alors en train de 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, ce qui modifie la représentation du titre. Cet événement est contrôlé en plaçant le curseur de l'image dans le conteneur.

Mettre à jour:

Le positionnement de votre texte est pas si difficile. La méthode rapide et facile serait de placer le conteneur parent avec le parent et le texte 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; }

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

Créé 10/09/2009 à 12:08
source utilisateur

voix
3

Qu'en est-il de

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

<a href="#"><img src="imagepath" alt="Image Title" />&nbsp;Image Text</a>
Créé 10/09/2009 à 12:07
source utilisateur

voix
0

Mes excuses. Je mal lu votre question. Voici un autre coup à lui:

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

De toute évidence, il y a des 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 vignette vidéo, vous devez définir la propriété line-height à la même hauteur que l'image miniature. Cela poussera le texte au milieu de la vidéo.

Créé 11/09/2009 à 02:59
source utilisateur

voix
0

Sur la base de la réponse de Jonathan, mais pour javascript si vous n'utilisez pas 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>
Créé 10/09/2009 à 12:39
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more