HomeHover/Un-Hover Code
2 posters
Page 1 of 1
Hover/Un-Hover Code
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:
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
-
Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park -
Re: Hover/Un-Hover Code
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 :
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>
Ange Tuteur- Forumaster
- Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania -
Re: Hover/Un-Hover Code
by Ace 1 June 10th 2015, 2:47 am
So where is the unhover section in your coding @Ange Tuteur
Ace 1- Helper
- Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park -
Re: Hover/Un-Hover Code
by Ange Tuteur June 10th 2015, 4:45 am
I attached the "unhover" changes to the node via the onmouseout event handler.
Example :
The jQuery equivalent is simply mouseout.
Example :
They both achieve the same effect, the only difference is that native JavaScript is faster.
Example :
- Code:
document.getElementById('newNode').onmouseout = function() {
this.style.background = 'red';
};
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.
Ange Tuteur- Forumaster
- Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania -
Re: Hover/Un-Hover Code
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>
Ace 1- Helper
- Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park -
Re: Hover/Un-Hover Code
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
Use header ? : No
Ange Tuteur- Forumaster
- Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania -
Re: Hover/Un-Hover Code
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?
Ace 1- Helper
- Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park -
Re: Hover/Un-Hover Code
by Ange Tuteur June 10th 2015, 3:05 pm
Well, you could attach the event to all anchors. For example :
Then you can define your style via CSS.
- 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
}
}
});
Then you can define your style via CSS.
- Code:
a.onmouseout {
color:red;
}
Ange Tuteur- Forumaster
- Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania -
Similar topics» Blue arrow hover : navigation hover bar
» Hover Nav Bar Code
» Hover over code
» Code on Hover?
» Hover image code from GS Greeny
» Hover Nav Bar Code
» Hover over code
» Code on Hover?
» Hover image code from GS Greeny
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
Facebook
Twitter
Pinterest
Youtube
