sur l'image de survol de survol en CSS

J'ai besoin d'un div avec l'image bg pour superposer une image (avec une certaine quantité de transparence) lorsque j'ai survolé. Je dois être en mesure d'avoir une superposition transparente qui peut être utilisée et réutilisée sur tout le site sur n'importe quelle image. Ma première tentative a été pour le moins contournée. Parce que j'ai découvert que vous ne pouvez pas rouler sur un div invisible, j'ai conçu un système sandwhich dans lequel l'image originale est la première couche, la superposition est la deuxième couche, et l'image originale est à nouveau la troisième couche. De cette façon, lorsque vous roll-over, l'image originale disparaît révélant l'image de superposition sur l'image originale:sur l'image de survol de survol en CSS

http://www.nightlylabs.com/uploads/test.html

Il fonctionne. Kinda. A cause de vous ne pouvez pas interagir avec un élément de visibilité: invisible (pourquoi?!) Le roll-over scintille à moins que vous ne posiez le curseur dessus.

Une aide? Cette méthode est mauvaise, donc si quelqu'un en a un meilleur s'il vous plaît commenter. J'ai utilisé le css suivant et son amende.

Source

2010-03-19 Anonymous

Avez-vous envisagé de peaufiner la propriété z-index? Je n'ai rien testé. Je pense juste à haute voix. –

z-index fonctionne comme il se doit. la chose de scintillement arrive n'importe quoi; c'est juste un effet secondaire de "visibilité: invisible". –

En outre, css est-il une exigence? Envisageriez-vous d'utiliser javascript pour vous aider dans cette tâche? –

#container { position:relative; width:184px; height:219px;} 
    .image { background-image:url(alig.jpg); position:absolute; top:0; left:0; width:184px; height:219px; z-index:2;} 
    .overlay { background-image:url(aligo.png); position:absolute; top:0; left:0; width:184px; height:219px; z-index:3;} 
    .top-image { background-image:url(alig.jpg); position:absolute; top:0; left:0; width:184px; height:219px; z-index:4;} 
    .top-image:hover { background-image:none;}

Source

2010-03-19 00:34:26 XGreen

bien fait. Merci. –

question rapide, cependant: IE7 ne l'aime pas. des idées? –

S'il vous plaît expliquer ce que vous rencontrez dans IE7 un peu plus loin que je l'ai affiché bien dans IE7 – XGreen

L'image scintille car vous ne pouvez pas passer la souris sur quelque chose qui ne s'y trouve pas. Cela fonctionnera si vous l'avez stratifié normalement (pas d'index z nécessaire) et le rendre transparent, de sorte qu'il est toujours affiché et peut être survolé. La deuxième image ne clignote pas et vous pouvez contrôler le style avec l'étiquette d'étendue. Voici quelques-unes des CSS je:

img.side 
    {position:absolute; 
    border:1px solid black; 
    padding:5px 5px 5px 5px; 
    float:center;} 
    /*normal base images*/ 

img:hover+span 
     {display:block;} 
    /*new images. automatically display beneath base/hover image*/ 

.side:hover 
     {opacity:0;} 
    /*base images again, only when hovered over*/ 

span 
     {display:none; 
     cursor:pointer;}

La balise vol stationnaire détermine le style de la img base (et div de base), et vol stationnaire + durée définit le style de la img qui apparaît uniquement en vol stationnaire.

Voici le code html montrant les div entièrement:

<div class="only" id="one"> 
      <img class="side" id="ach" src="ach.svg">Academic</a> 
       <span> 
       <img class="hovering" id="hach" src="Hach.svg">Academic</a> 
       </span> 
     </div>

Hope this helps.

Source

2013-10-17 01:59:48 Hannah

Répondre

Questions connexes