Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente di HTML.it
    Registrato dal
    Jul 2005
    Messaggi
    2,401

    attivare l'elemento hover della pagina corrente

    codice:
    <link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
    
    <style>
    
    ul.animatedunderlinemenu{
      list-style: none;
      margin: 0;
    	margin-bottom: 50px; /* add spacing between UL and rest of content for demo purposes */
      padding:0;
      text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */
      font: bold 1.2em 'Lato', sans-serif; /* use google custom font "Lato" */
    }
    
    ul.animatedunderlinemenu li{
      display: inline;
      margin-right:25px; /* spacing between each menu item */
    }
    
    ul.animatedunderlinemenu li a{
      position: relative;
    	display: inline-block;
      color: black;
      padding: 2px 3px;
      padding-bottom: 8px; /*spacing between each menu item and underline beneath it */
      text-decoration: none;
      margin-bottom: 20px; /* spacing between A elements, relevant when menu becomes multi-lined */
      letter-spacing: .1em;
    }
    
    ul.animatedunderlinemenu li a:after{
      position: absolute;
    	display: block;
      content: '';
      width: 0;
      height: 3px;
      background: #CAF4F9;
      top: 100%;
      left: 0;
      opacity: 0;
      z-index: -1;
      -wekkit-transition: all .3s;
      transition: all .3s;
    }
    
    ul.animatedunderlinemenu li a:hover:after{
      width: 100%; /* increase underline width to 100% */
      opacity: 1;
    }
    
    /* //// Expand underline effect //// */
    
    ul.animatedunderlinemenu.expand li a:after{
      background: #CAF4F9;
    	-webkit-transition: width .3s, opacity .3s, height .3s .3s;
    	transition: width .3s, opacity .3s, height .3s .3s;
    }
    
    ul.animatedunderlinemenu.expand li a:hover:after{
      width: 100%; /* increase underline width to 100% */
    	height: 10px; /* increase underline height to 10px */
      opacity: 1;
    }
    
    /* //// Expand underline upwards effect //// */
    
    ul.animatedunderlinemenu.expandup li a:after{
      background: #CAF4F9;
    	top: auto;
    	bottom: 0;
    	-webkit-transition: width .3s, opacity .3s, height .3s .3s;
    	transition: width .3s, opacity .3s, height .3s .3s;
    }
    
    ul.animatedunderlinemenu.expandup li a:hover:after{
      width: 100%; /* increase underline width to 100% */
    	height: 100%; /* increase underline height to 100% */
      opacity: 1;
    }
    
    </style>
    
    <ul class="animatedunderlinemenu">
        <li><a href="#">HOME</a></li>
        <li><a href="#">GALLERY</a></li>
        <li><a href="#">CONTACTS</a></li>
    </ul>
    Quale parametro dovrei modificare per essere l'hover attivo?
    Per esempio se mi trovo in home deve essere attivo l'hover su home e così via
    Grazie

  2. #2
    Moderatore di PHP L'avatar di Alhazred
    Registrato dal
    Oct 2003
    Messaggi
    11,689
    Solo tramite CSS non puoi, quando vai su una pagina devi associare al tag <a> corrispondente una classe con gli attributi che hai ora nell'hover di cui parli.
    Questa cosa di aggiungere e rimuovere classi la puoi fare con JS (come fa per esempio Bootstrap) oppure con un linguaggio lato server tipo PHP.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.