Welcome to WebmasterWorld Guest from 34.204.203.142

Forum Moderators: open

Message Too Old, No Replies

How to insert hover over image effects using inline css?

     
8:01 am on Jul 12, 2017 (gmt 0)

New User

joined:July 12, 2017
posts:2
votes: 0


How to insert hover over image effects using inline css?
coz, my cms have tools using a source code and I can't put external css.
9:02 am on July 12, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


Hi Kxshnx welcome to WebmasterWorld [webmasterworld.com]

Good info here: [kyleschaeffer.com...]
10:05 am on July 12, 2017 (gmt 0)

New User

joined:July 12, 2017
posts:2
votes: 0


hello keyplyr+ i am using the tools then source codes and you cannot put html tags sample the <p> or <table>
when i put inside the source codes <html><head> <style> </style> </head><body> <table></table></body></html>
then save after that the only thing that will read is the table tag directly and when i click back again the source codes the table tag remain the rest are gone. i cant use the external css.
10:42 am on July 12, 2017 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


Hi there Kxshnx,
If you do not have full control of your code, then dump
the monstrosity that does and regain control of your life.

Pseudo classes such as ":hover" cannot be used inline.


birdbrain
12:50 pm on July 12, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2740
votes: 838


First what birdbrain said,
If you do not have full control of your code, then dump the monstrosity


You can hack a solution using SVG embedded with object tags:

<!DOCTYPE html>
<html>
<body>
<object>
<svg width="400" height="110">
<style>
rect{fill:red;}
rect:hover{fill:blue;}
</style>
<rect width="300" height="100" style="stroke-width:3;stroke:rgb(0,0,0)" />
Sorry, your browser does not support inline SVG.
</svg>
</object>

</body>
</html>

But this solution has limited browser support.

If you get control of your CMS then SVG is still the way to go. Your SVG could remain as an <img> but you could simply use css :hover to change the color. So no need to have two copy of the image as suggested in the solution proposed by keyplyr's.


<!DOCTYPE html>
<html>
<head>
<style>
.rectangle:hover{fill:blue;}
</style>
</head>
<body>
<img src="svg_rectangle.svg">
</body>
</html>


where svg_rectangle.svg is:

<svg width="400" height="110">
<rect class="rectangle" width="300" height="100" style="fill:red;stroke-width:3;stroke:rgb(0,0,0)" />
Sorry, your browser does not support inline SVG.
</svg>


Note that you can easily convert your image to svg using free online tools.
And here is an article from css-tricks that explains thing in more detail. [css-tricks.com...]
5:33 pm on July 12, 2017 (gmt 0)

Junior Member from US 

5+ Year Member

joined:Feb 11, 2010
posts: 146
votes: 2


Not really familiar with CMS systems but it seems as though it doesn't want you using < or >. Just a thought--have you tried using ascii coding?
&#60; is the ascii equivalent of < and
&#62; is a >
4:07 am on July 13, 2017 (gmt 0)

Junior Member from US 

5+ Year Member

joined:Feb 11, 2010
posts: 146
votes: 2


Sorry, not thinking, that would just make the tag appear in the browser.
7:52 am on July 14, 2017 (gmt 0)

New User

joined:Feb 2, 2017
posts:20
votes: 1


maybe inline js help you
<a href='index.html' 
onmouseover='this.style.textDecoration="none"'
onmouseout='this.style.textDecoration="underline"'>
Click Me
</a>