Fai stare il hover CSS all'interno della finestra

Question

Ho una soluzione di hover con CSS. Tuttavia, le immagini al passaggio del mouse non rispettano il viewport e pertanto finiscono per essere visualizzate al di fuori di esso. Ho pianificato semplicemente di creare nuove classi specificando l'offset in base alla posizione dell'immagine all'interno del mio progetto, ma poiché non riesco a controllare la risoluzione che l'utente sta usando, stavo pensando che ci dovrebbe essere un modo per forzare l'hover da mostrare all'interno il viewport. Qualcuno ha un'idea su come posso farlo?

Ho il seguente CSS:

.thumbnail:hover { 
    background-color: transparent; 
    z-index: 50; 
} 

.thumbnail span { 
    position: absolute; 
    padding: 5px; 
    left: -1000px; 
    border: 1px dashed gray; 
    visibility: hidden; 
    color: black; 
    text-decoration: none; 
} 

.thumbnail span img { 
    border-width: 0; 
    padding: 2px; 
} 

.thumbnail:hover span { 
    visibility: visible; 
    top: 0; 
    left: 70px; 
} 

Per abbinare i seguenti miniature con hover:

<li> 
    <a href="http://www.yahoo.com" class="img thumbnail"> 
     <img src="1_s.jpg" /> 
     <span><img src="1_b.jpg" /></span> 
    </a> 
</li> 
<li> 
    <a href="http://www.google.com" class="img thumbnail"> 
     <img src="2_s.jpg" /> 
     <span><img src="2_b.jpg" /></span> 
    </a> 
</li> 

ho una pagina di esempio qui visualizzazione del comportamento:

http://estorkdelivery.com/example/example2.html

Passa il mouse sopra le immagini nella parte inferiore per visualizzare il passaggio del mouse visualizzazione dell'immagine al di fuori del viewport.

Grazie!

Aggiornamento 2/22/2012 Ho testato la risposta n. 1 in basso, ma ha introdotto nuovi problemi, come la necessità di cambiare la trasparenza e la necessità di visualizzare sempre l'immagine al passaggio del mouse dall'alto a sinistra dell'immagine - entrambi i problemi non ho visto alcun modo di modificare le opzioni dello script. Qualcuno ha altri suggerimenti o un modo per modificare lo script nella risposta n. 1? Inoltre, dovrei aggiungere quello che sto cercando in quanto più del risultato finale è lo stile hover delle immagini su istockphoto.com dove le immagini appaiono sempre nello stesso punto a sinistra oa destra delle immagini che stanno aleggiando e non in base alla posizione del mouse mentre si passa il mouse sull'immagine.

Answer 1

Ho creato un plug-in su misura per te!

http://jsfiddle.net/adaz/tAECz/

Beh, è ​​piuttosto semplice, ma penso che corrisponde ai tuoi criteri. È possibile attivare in due modi:

1) Se non può essere disturbato la creazione di miniature per ogni immagine, si può semplicemente elencare le immagini in questo modo:

<ul id="istockWannabe"> 
    <li> 
     <img src="imgURL" width="600" height="400" title="Description" /> 
    </li> 
    <li> 
     <img src="imgURL" width="600" height="400" title="Description" /> 
    </li> 
... 
</ul> 

2) Se si vuole veramente per creare i propri miniature, il codice HTML dovrebbe essere simile a questo:

<ul id="istockWannabe"> 
    <li> 
     <span rel="largeImgURL"><img src="thumbURL" /><span class="iStockWannabe_description">Image description</span></span> 
    </li> 
... 
</ul> 

in entrambi i casi si sceglie, è necessario includere jQuery 1.7+ nella tua pagina insieme con il mio plugin.

L'ultima cosa che devi fare è quello di attivare, se si sta andando per la prima opzione, si può semplicemente inserire nella vostra pagina seguente codice:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#istockWannabe").istockWannabe(); 
    }); 
</script> 

se si sta andando per la seconda opzione, è necessario sovrascrivere le impostazioni di default in questo modo:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#istockWannabe").istockWannabe({ createThumbs: false }); 
    }); 
</script> 

questo è più come un prototipo quindi è abbastanza limitato in termini di functionaltiy ma è possibile impostare alcune opzioni come:
thumbMaxWidth: 100.210 thumbMaxHeight: 100 tooltipWidth: 200 tooltipHeight: 150 transitionSpeed: 100

Se ti piace, io sono felice di trascorrere del tempo su di esso e adattarlo alle tue esigenze!

Answer 2

Prova il tooltip jQuery:

Ecco un esempio secondo la vostra richiesta:
http://jsfiddle.net/cadence96/3X2eZ/

DOCS
http://docs.jquery.com/Plugins/Tooltip
http://jquery.bassistance.de/tooltip/demo/

Brevi istruzioni:
1) all'interno della testa <> caricare i CSS e script:

<link href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css" rel="stylesheet" type="text/css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script> 

2) Sempre nella testa <> inserire lo script di esecuzione:

<script type="text/javascript"> 
      $(document).ready(function() { 
       $(".your-div").tooltip({ 
        track: true, 
        delay: 0, 
        showURL: false, 
        fade: 250, 
        bodyHandler: function() { 
         return $($(this).next().html()); 
        }, 
        showURL: false 
       }); 
      }); 
     </script> 

La classe '.my-div' verrà utilizzato per visualizzare l'immagine con l'evento hover.
Il div fratello a '.my-div' deve contenere gli elementi nascosti da rendere visibili dopo il passaggio del mouse.

<ul> 
    <li> 
      <div class="my-div"> 
       <!-- Here comes the image with the hover event --> 
      </div> 
      <div class="active-hover"> 
       <!-- Here comes all the hidden elements I want to display while hovering the PREVIOUS div --><br /> 
       <!-- .active-hover must be set with display:none --> 
      </div> 
    </li> 
</ul> 

Questo è tutto!

Answer 3

Ho sviluppato uno script, in js è possibile modificare la larghezza del contenitore.

Ecco il violino: http://jsfiddle.net/cadence96/GgDqh/

AGGIORNATO, ora lavora in FIDDLE ed è più adattabile.

Answer 4

aggiornamento:

• demo: http://so.devilmaycode.it/make-css-hover-stay-within-viewport

un'occhiata al codice sorgente di

Answer 5

Questo funziona. Ho tuttavia risolto il problema solo per l'asse Y. Per l'offset orizzontale dovrebbe essere lo stesso. See how it works here. Ho impostato il top esattamente sul lato dell'immagine * -1, questo allinea l'immagine in basso se non si adatta, cambia quel valore in qualsiasi cosa tu voglia. Le immagini sono molto grandi e questa sceneggiatura non sarà comunque a prova di proiettile. Dovresti ottenere l'intera area visibile per assicurarti che non si tagli sull'altro lato quando la posizioni nuovamente.

Il markup non è cambiato, ho solo aggiunto il Jquery:

$(document).ready(function(){ 

    $(".thumbnail > img").mouseenter(function(){ 

     var winSize = $(window).height(); 
     var winScrollTop = $(window).scrollTop(); 
     var linkOffset = $(this).offset().top - winScrollTop + 75; 
     // 75px is the height of the img. To get the offset().bottom . Get rid of the scroll too. 
     var imgHover = $(this).next("span"); 
     var imgHoverHeight = parseInt(imgHover.children("img").attr("height")); 
     var spaceDif = winSize-linkOffset; 
     if(spaceDif < imgHoverHeight){ 
      imgHover.css("top", -imgHoverHeight+"px"); 
      //it doesn't have to be -imgHoverHeight. Tweak this value to get better results   
     } 

    }); 

    $(".thumbnail > img").mouseout(function(){ 

     $("span").css("top", "0"); 

    }); 
}); 

Speranza ha aiutato !!

Answer 6

Prova questo ... sembra relativamente bello!

<html> 
<head> 
    <title>Hover Test</title> 
    <style> 
     li {margin-bottom: 100px;} 
     .thumbnail{position: relative;z-index: 0;} 
     .thumbnail:hover{background-color: transparent;z-index: 50;} 
     .thumbnail div{ /*CSS for enlarged image*/position: absolute;padding: 5px;left: -1000px;border: 1px dashed gray;visibility: hidden;color: black;text-decoration: none;} 
     .thumbnail div img{ /*CSS for enlarged image*/border-width: 0;padding: 2px;} 
     .thumbnail:hover div{ /*CSS for enlarged image on hover*/visibility: visible;top: 0;left: 70px; /*position where enlarged image should offset horizontally */} 
    </style> 
</head> 
<body> 
    <li> 
     <a href="http://www.yahoo.com" class="img thumbnail"> 
      <img src="1_s.jpg"> 
      <div><img src="1_b.jpg"></div> 
     </a> 
    </li> 
    <li> 
     <a href="http://www.google.com" class="img thumbnail"> 
      <img src="2_s.jpg"> 
      <div><img src="2_b.jpg"></div> 
     </a> 
    </li> 
    <li> 
     <a href="http://www.apple.com" class="img thumbnail"> 
      <img src="3_s.jpg"> 
      <div><img src="3_b.jpg"></div> 
     </a> 
    </li> 
    <li> 
     <a href="http://www.babycenter.com" class="img thumbnail"> 
      <img src="4_s.jpg"> 
      <div><img src="4_b.jpg"></div> 
     </a> 
    </li> 
    <li> 
     <a href="http://www.food.com" class="img thumbnail"> 
      <img src="5_s.jpg"> 
      <div><img src="5_b.jpg"></div> 
     </a> 
    </li>  
</body>