CSS and HTML 5 – Hover Formatting

Eli the Computer Guy *NEW, CSS and HTML 5

You can dynamically modify both text and image formatting when a user hovers over elements in an HTML document.

hoverStyle.css

p:hover {
	background-color: lightgrey;
}

tr:hover {
	background-color: yellow;
}

img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 150px;
	height: auto;
}

img:hover {
	
        width: 300px;
	height: auto;
	border: 10px solid grey;
}

.gallery {
	display: inline-block;
	width: 150px;
	height: auto;
	border: 10px solid white;

}

.gallery:hover {
	width: 200px;
	height: auto;
	border: 3px solid yellow;
}

hover.html

<html>
<head>
<link rel="stylesheet" href="hoverStyle.css" />
</head>
<body>

<p>This is a P Tag</p>
<p>This is another P Tag</p>
<p>Here is yet another P Tag</p>

<table>
<tr><td>item 1</td><td>item 2</td><td>item 3</td></tr>
<tr><td>item 1</td><td>item 2</td><td>item 3</td></tr>
<tr><td>item 1</td><td>item 2</td><td>item 3</td></tr>
<tr><td>item 1</td><td>item 2</td><td>item 3</td></tr>
<table>

<img src="picture700.jpg">
<br>

<img class="gallery" src="picture700.jpg">
<img class="gallery" src="picture700.jpg">
<img class="gallery" src="picture700.jpg">
<img class="gallery" src="picture700.jpg">
<img class="gallery" src="picture700.jpg">
<img class="gallery" src="picture700.jpg">

</body>
</html>

picture700jpg