XF 1.2 How to get node icons to change on hover?

[KamelJabber]

I would like my forum node icon to change on hover (between 2 different images).

I may be approaching this incorrectly, however, I noticed the "rss" icon highlights when you hover over the forum node row. I wanted to take advantage of this hover event and also change my forum node icon.

It appears that template is in node_forum_level_2. I was looking for something like a jQuery .hover() method or something similar.

Is there an easy way for me to piggy back off of the same hover event?

TY

 

[Jake Bunce]

This can be done with CSS.

Admin CP -> Appearance -> Templates -> EXTRA.css

Add this code:

.node.node_2 .forumNodeInfo.unread .nodeIcon
{
	background-image: url("path/to/image.gif");
	background-position: 0px 0px;
}

.node.node_2:hover .forumNodeInfo.unread .nodeIcon
{
	background-image: url("path/to/hoverimage.gif");
	background-position: 0px 0px;
}

 

[KamelJabber]

This can be done with CSS.

Admin CP -> Appearance -> Templates -> EXTRA.css

Add this code:

.node.node_2 .forumNodeInfo.unread .nodeIcon
{
    background-image: url("path/to/image.gif");
    background-position: 0px 0px;
}

.node.node_2:hover .forumNodeInfo.unread .nodeIcon
{
    background-image: url("path/to/hoverimage.gif");
    background-position: 0px 0px;
}

lol, talk about over thinking a solution!

this worked great, thanks!!

 

[Hristo Avramov]

.node.node_2 .forumNodeInfo.unread .nodeIcon
{
background-image: url("path/to/image.gif");
background-position: 0px 0px;
}

With this code. can I use sprite image and put different icon for every forum ?
By the way I want to use the same icon for read and unread.

 

[Jake Bunce]

.node.node_2 .forumNodeInfo.unread .nodeIcon
{
background-image: url("path/to/image.gif");
background-position: 0px 0px;
}

With this code. can I use sprite image and put different icon for every forum ?
By the way I want to use the same icon for read and unread.

Yes. Just specify appropriate background positions for your sprite.