0

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.

Matthew Strawbridge
  • 19,940
  • 10
  • 72
  • 93
Bodokh
  • 976
  • 4
  • 15
  • 34

3 Answers3

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

kleinfreund
  • 6,546
  • 4
  • 30
  • 60
StarsSky
  • 6,721
  • 6
  • 38
  • 63
0

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

<style>
 p:hover{
  //coding...
  }
</style>
Haji
  • 1,999
  • 1
  • 15
  • 21
0

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>
Shin
  • 191
  • 7
  • 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 Jan 02 '14 at 15:06
  • thanks for the answer works like a charm. how can i make the red disappear after removing the mouse? – Bodokh Jan 02 '14 at 15:12
  • You don't need a external JS page, just use the `script` tag. – Shin Jan 02 '14 at 15:38
  • You can try `onmouseout` to remove the style. – Shin Jan 02 '14 at 15:38
  • Oh but how can I add both the onmouseover and onmouseout on the same text without resolving to a separate JS page? – Bodokh Jan 02 '14 at 21:11
  • I write a demo in jsfiddle, you can take a look: http://jsfiddle.net/bossonchan/LBjap/8/ , and if you wouldn't want to mix js in html, you can try this: http://jsfiddle.net/bossonchan/avF3s/1/ – Shin Jan 03 '14 at 02:04