Hover/Un-Hover Code Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
2 posters

    Hover/Un-Hover Code

    Ace 1
    Ace 1
    Ace 1
    Helper
    Helper


    Male Posts : 843
    Reputation : 64
    Language : English - French?
    Location : Druid Hill Park
    • Post n°1

    In progress Hover/Un-Hover Code

    Post by Ace 1 June 9th 2015, 6:00 pm

    Hey FM. I already know there isn't an un-hover code for CSS without using jquery.

    But isn't there someway to make it so when you unhover, certain codes are activated? For example:

    Code:
    a:unhover {
        color: #000;
        text-shadow: 0em;
        font-weight: normal
    }
    • Back to top
    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13246
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°2

    In progress Re: Hover/Un-Hover Code

    Post by Ange Tuteur June 10th 2015, 12:37 am

    Unfortunately CSS does not have such a pseudo class, so your only solution would be to utilize JavaScript, or a JavaScript library such as jQuery. This is a quick example between the two :
    http://forumbeta.forumactif.com/h6-hover

    On the left is CSS and on the right is JavaScript. This is the source if you want to play around with it :
    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title>Hover Example</title>
        <meta charset="UTF-8" />
        <style type="text/css">
    body {
      color:#000;
      font-size:12px;
      font-family:verdana, arial, sans-serif;
      background:#DEF;
    }

    .hoverTable {
      background:#EEE;
      border:1px solid #DDD;
      width:75%;
      margin:0 auto;
      margin-top:10%;
    }

    .hoverTable td {
      border:1px solid #CCC;
      padding:6px 9px;
      width:50%;
    }
         
    .hoverTable .head td {
      text-align:center;
      font-weight:bold;
      font-size:16px;
      font-family:trebuchet ms, verdana, sans-serif;
    }
         
    #cssHover:hover {
      color:red;
    }

    #cssHover:hover:after {
      content:"You hovered over me !";
      color:blue;
      display:block;
    }
        </style>
      </head>
     
      <body>
        <table class="hoverTable">
          <tr class="head">
            <td>CSS</td>
            <td>JavaScript</td>
          </tr>
          <tr>
            <td><div id="cssHover">Hover me <img src="http://2img.net/i/fa/i/smiles/icon_smile.gif" alt="Smile" longdesc="2" /></div></td>
            <td><div id="jsHover">Hover me <img src="http://2img.net/i/fa/i/smiles/icon_smile.gif" alt="Smile" longdesc="2" /></div></td>
          </tr>
        </table>
       
        <script type="text/javascript">//<![CDATA[
    (function() {
      var node = document.getElementById('jsHover');
     
      node.onmouseover = function() {
          this.innerHTML += '<span style="color:green"> You hovered me ! <img src="http://2img.net/i/fa/i/smiles/icon_biggrin.png" alt="Very Happy" longdesc="1" /></span>';
        this.style.color = 'red';
      };
     
      node.onmouseout = function() {
        this.innerHTML = this.innerHTML.replace(/<span style="color:green"> You hovered me ! <img.*?><\/span>/g, '<span style="color:orange"> You unhovered me.. <img src="http:\/\/illiweb.com\/fa\/i\/smiles\/icon_sad.gif" alt="Sad" longdesc="3" \/></span>');
        this.style.color = 'blue';
       
        window.setTimeout(function() {
          node.innerHTML = node.innerHTML.replace(/<span style="color:orange"> You unhovered me.. <img.*?><\/span>/g, '');
          node.style.color = '';
        }, 3000);
      };
    })();
      //]]></script>
      </body>
     
    </html>
    • Back to top
    Ace 1
    Ace 1
    Ace 1
    Helper
    Helper


    Male Posts : 843
    Reputation : 64
    Language : English - French?
    Location : Druid Hill Park
    • Post n°3

    In progress Re: Hover/Un-Hover Code

    Post by Ace 1 June 10th 2015, 2:47 am

    So where is the unhover section in your coding @Ange Tuteur
    • Back to top
    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13246
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°4

    In progress Re: Hover/Un-Hover Code

    Post by Ange Tuteur June 10th 2015, 4:45 am

    I attached the "unhover" changes to the node via the onmouseout event handler.

    Example :
    Code:
    document.getElementById('newNode').onmouseout = function() {
      this.style.background = 'red';
    };
    ( You can also attach events via addEventListener )


    The jQuery equivalent is simply mouseout.

    Example :
    Code:
    $('#newNode').mouseout(function() {
      $(this).css('background', 'red');
    });

    They both achieve the same effect, the only difference is that native JavaScript is faster. Wink
    • Back to top
    Ace 1
    Ace 1
    Ace 1
    Helper
    Helper


    Male Posts : 843
    Reputation : 64
    Language : English - French?
    Location : Druid Hill Park
    • Post n°5

    In progress Re: Hover/Un-Hover Code

    Post by Ace 1 June 10th 2015, 1:26 pm

    Wait, I am so confused. Should I put this code in a Java Page?

    Ange Tuteur wrote:Unfortunately CSS does not have such a pseudo class, so your only solution would be to utilize JavaScript, or a JavaScript library such as jQuery. This is a quick example between the two :
    http://forumbeta.forumactif.com/h6-hover

    On the left is CSS and on the right is JavaScript. This is the source if you want to play around with it :
    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title>Hover Example</title>
        <meta charset="UTF-8" />
        <style type="text/css">
    body {
      color:#000;
      font-size:12px;
      font-family:verdana, arial, sans-serif;
      background:#DEF;
    }

    .hoverTable {
      background:#EEE;
      border:1px solid #DDD;
      width:75%;
      margin:0 auto;
      margin-top:10%;
    }

    .hoverTable td {
      border:1px solid #CCC;
      padding:6px 9px;
      width:50%;
    }
          
    .hoverTable .head td {
      text-align:center;
      font-weight:bold;
      font-size:16px;
      font-family:trebuchet ms, verdana, sans-serif;
    }
          
    #cssHover:hover {
      color:red;
    }

    #cssHover:hover:after {
      content:"You hovered over me !";
      color:blue;
      display:block;
    }
        </style>
      </head>
      
      <body>
        <table class="hoverTable">
          <tr class="head">
            <td>CSS</td>
            <td>JavaScript</td>
          </tr>
          <tr>
            <td><div id="cssHover">Hover me <img src="http://2img.net/i/fa/i/smiles/icon_smile.gif" alt="Smile" longdesc="2" /></div></td>
            <td><div id="jsHover">Hover me <img src="http://2img.net/i/fa/i/smiles/icon_smile.gif" alt="Smile" longdesc="2" /></div></td>
          </tr>
        </table>
        
        <script type="text/javascript">//<![CDATA[
    (function() {
      var node = document.getElementById('jsHover');
      
      node.onmouseover = function() {
          this.innerHTML += '<span style="color:green"> You hovered me ! <img src="http://2img.net/i/fa/i/smiles/icon_biggrin.png" alt="Very Happy" longdesc="1" /></span>';
        this.style.color = 'red';
      };
      
      node.onmouseout = function() {
        this.innerHTML = this.innerHTML.replace(/<span style="color:green"> You hovered me ! <img.*?><\/span>/g, '<span style="color:orange"> You unhovered me.. <img src="http:\/\/illiweb.com\/fa\/i\/smiles\/icon_sad.gif" alt="Sad" longdesc="3" \/></span>');
        this.style.color = 'blue';
        
        window.setTimeout(function() {
          node.innerHTML = node.innerHTML.replace(/<span style="color:orange"> You unhovered me.. <img.*?><\/span>/g, '');
          node.style.color = '';
        }, 3000);
      };
    })();
       //]]></script>
      </body>
      
    </html>
    • Back to top
    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13246
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°6

    In progress Re: Hover/Un-Hover Code

    Post by Ange Tuteur June 10th 2015, 1:53 pm

    The example code I provided is an HTML page. It should go in under Modules > HTML pages management > New page

    Use header ? : No
    • Back to top
    Ace 1
    Ace 1
    Ace 1
    Helper
    Helper


    Male Posts : 843
    Reputation : 64
    Language : English - French?
    Location : Druid Hill Park
    • Post n°7

    In progress Re: Hover/Un-Hover Code

    Post by Ace 1 June 10th 2015, 2:42 pm

    So is there any way to just receive the code to apply to all links in my forum using a combination between JavaScript and CSS?
    • Back to top
    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13246
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°8

    In progress Re: Hover/Un-Hover Code

    Post by Ange Tuteur June 10th 2015, 3:05 pm

    Well, you could attach the event to all anchors. For example :
    Code:
    $(function() {
      for (var a = document.getElementsByTagName('A'), i = 0, j = a.length; i < j; i++) {
        a[i].onmouseout = function() {
          var t = this; // temporary cache
          if (!/onmouseout/.test(t.className)) t.className += ' onmouseout';
         
          // remove the classname after a specified amount of time
          window.setTimeout(function() {
            t.className = t.className.replace(/onmouseout/g, '');
          }, 250); // duration of 0.250 seconds
        }
      }
    });
    ( Apply to all pages )

    Then you can define your style via CSS.
    Code:
    a.onmouseout {
      color:red;
    }
    • Back to top