How to write a:hover in inline CSS?
It is called pseudo-selector and used to select all the elements when the user move mouse over the elements. It can be used on all the element. A <!DOCTYPE html> element must be declared in the document to see the working of this selector in all the elements.
Example 1:
<!DOCTYPE html> < html > < head > < title >a:hover in inline CSS</ title > < style > h1 { color:green; } body { text-align:center; } a { text-decoration:none; color:green; } </ style > </ head > < body > < h1 >GeeksforGeeks</ h1 > < h2 >a:hover in inline CSS</ h2 > < a href = "#" onMouseOver = "this.style.color='red'" onMouseOut = "this.style.color='green'" >GeeksforGeeks</ a > </ body > </ html > |
Output:
Example 2: This example uses JavaScript to display a:hover content in CSS. The onmouseover and onmouseout event attribute is called to display the a:hover content.
<!DOCTYPE html> < html > < head > < title >a:hover in inline CSS</ title > < style > h1 { color:green; } body { text-align:center; } a { text-decoration:none; color:green; } </ style > < script > function mouseover() { document.getElementById("gfg").style.color = "red"; } function mouseout() { document.getElementById("gfg").style.color = "green"; } </ script > </ head > < body > < h1 >GeeksforGeeks</ h1 > < h2 >a:hover in inline CSS</ h2 > < a href = "#" id = "gfg" onmouseover = "mouseover()" onmouseout = "mouseout()" >GeeksforGeeks</ a > </ body > </ html > |
Output:
Supported Browsers: The browser supported by a:hover selector are listed below:
- Apple Safari 3.1
- Google Chrome 4.0
- Firefox 2.0
- Opera 9.6
- Internet Explorer 7.0