The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Hover/Un-Hover Code

View previous topic View next topic Go down

In progress Hover/Un-Hover Code

Post by Ace 1 on 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
}

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

In progress Re: Hover/Un-Hover Code

Post by Ange Tuteur on 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://illiweb.com/fa/i/smiles/icon_smile.gif" alt="Smile" longdesc="2" /></div></td>
        <td><div id="jsHover">Hover me <img src="http://illiweb.com/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://illiweb.com/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>

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hover/Un-Hover Code

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

So where is the unhover section in your coding @Ange Tuteur

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

In progress Re: Hover/Un-Hover Code

Post by Ange Tuteur on 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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hover/Un-Hover Code

Post by Ace 1 on 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://illiweb.com/fa/i/smiles/icon_smile.gif" alt="Smile" longdesc="2" /></div></td>
  <td><div id="jsHover">Hover me <img src="http://illiweb.com/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://illiweb.com/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>

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

In progress Re: Hover/Un-Hover Code

Post by Ange Tuteur on 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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hover/Un-Hover Code

Post by Ace 1 on 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?

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

In progress Re: Hover/Un-Hover Code

Post by Ange Tuteur on 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;
}

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum