How do I create Hover effects in HTML without using a CSS page

Question

I know that with CSS you can do for example:

p:hover {
    xxx:yyy;
}

I wish to do so but in the HTML page without linking the CSS, like so:

<p style="xxx">xxxxxxxx</p>

but with the hover option.

see stackoverflow.com/questions/5293280/…

db9dreamer
– db9dreamer

2014-01-01 14:25:10 +00:00
Commented Jan 1, 2014 at 14:25 — db9dreamer
– db9dreamer, Commented Jan 1, 2014 at 14:25

StarsSky · Accepted Answer · 2014-01-01 15:02:28Z

3

You can insert directly your CSS inside the html page without linking it:

<head>
<style>
    p:hover {
        xxx: yyy;
    }
</style>
</head>
<body>
    <p>xxxxxxxx</p>
</body>

Internal Style Sheet

edited Jan 1, 2014 at 15:02

user2036825

answered Jan 1, 2014 at 14:21

StarsSky

6,6996 gold badges40 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bodokh Over a year ago

Thanks, i forgot to mention that i do have the option to edit the <head> i can only use the body.

Haji · Accepted Answer · 2014-01-01 14:24:28Z

0

You can simply use internal css in your html page as below..

<style>
 p:hover{
  //coding...
  }
</style>

answered Jan 1, 2014 at 14:24

Haji

2,0971 gold badge16 silver badges22 bronze badges

Comments

Shin · Accepted Answer · 2014-01-01 14:41:17Z

-1

Try JavaScript:

<p onmouseover="change(this)" >xxxxx</p>
<script type="text/javascript" >
  function change (element) {
    var style = element.style;
    // Do something with style...
    // Example: style.color = "red";
  }
</script>

answered Jan 1, 2014 at 14:41

Shin

1897 bronze badges

6 Comments

Bodokh Over a year ago

Didn't think about using JS! thanks for the answer, but do i need an external JS page for this? i need everything in the same page.

Bodokh Over a year ago

thanks for the answer works like a charm. how can i make the red disappear after removing the mouse?

Shin Over a year ago

You don't need a external JS page, just use the script tag.

Shin Over a year ago

You can try onmouseout to remove the style.

Bodokh Over a year ago

Oh but how can I add both the onmouseover and onmouseout on the same text without resolving to a separate JS page?

|

Collectives™ on Stack Overflow

How do I create Hover effects in HTML without using a CSS page

3 Answers 3

1 Comment

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related