web-dev-qa-db-fra.com

Comment faire des tags sur tumblr show uniquement en survol?

Savez-vous comment afficher les balises, les notes et les informations de permalien en survol? Comme si mon blog affiche les balises, les notes, la permanente et autres au bas de chaque message et que je souhaite le modifier pour qu'il ne soit visible qu'en survol.

tumblrtumblr-themes
1
ashleyB

Cela dépend de votre thème, mais vous devrez probablement trouver le nom de la div contenant les informations sur la publication, puis ajouter du code CSS pour masquer cette div par défaut et l'afficher en survol.

Par exemple, il s’agit du code CSS que j’ai ajouté à mon thème (juste avant {CustomCSS} dans le code du thème) :

body.index .post .meta {
   opacity: 0; 
   height: 0;
}
body.index .post:hover .meta {
   opacity: 1;
   height: auto;
}

Donc, pour mon thème, le conteneur pour les informations de publication est . Meta , et il apparaît lorsque vous passez la souris sur la div pour l'ensemble de la publication, qui est . post , mais en ajoutant body.index avant . post le limite à ne s'afficher que sur les publications de ma page d'index principale et non sur les pages de mes publications permalien.

Si vous souhaitez une transition plus douce, vous pouvez ajouter quelques lignes (pour la compatibilité avec différents navigateurs) aux deux balises css, comme ceci:

body.index .post .meta {
   opacity: 0; 
   height: 0;
   -moz-transition-duration: .2s;
   -webkit-transition-duration: .2s;
   transition-duration: .2s;
}
body.index .post:hover .meta {
   opacity: 1;
   height: auto;
   -moz-transition-duration: .2s;
   -webkit-transition-duration: .2s;
   transition-duration: .2s;
}

Il est plus utile si vous créez un lien vers votre thème et/ou votre blog afin que nous puissions voir les balises qu'ils utilisent, mais si vous voulez comprendre, il y a quelques informations supplémentaires sur cette réponse: Comment afficher les balises sur tumblr quand vous survolez une photo?

2
gamingexpert13