How to insert hover over image effects using inline css?

Forum Moderators: open

Message Too Old, No Replies

How to insert hover over image effects using inline css?

Kxshnx

8:01 am on Jul 12, 2017 (gmt 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.

keyplyr

9:02 am on Jul 12, 2017 (gmt 0)

Hi Kxshnx welcome to WebmasterWorld [webmasterworld.com]

Good info here: [kyleschaeffer.com...]

Kxshnx

10:05 am on Jul 12, 2017 (gmt 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.

birdbrain

10:42 am on Jul 12, 2017 (gmt 0)

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

NickMNS

12:50 pm on Jul 12, 2017 (gmt 0)

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...]

typomaniac

5:33 pm on Jul 12, 2017 (gmt 0)

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?
< is the ascii equivalent of < and
> is a >

typomaniac

4:07 am on Jul 13, 2017 (gmt 0)

Sorry, not thinking, that would just make the tag appear in the browser.

Choiceed

7:52 am on Jul 14, 2017 (gmt 0)

maybe inline js help you

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