Линк выделяется фото-фоном при наведении [CSS] Библиотека javascript + CSS

работает в: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+

HTML ↴

размер Kb

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

.navicontainer {
		float: left;
		left: 50%;
		position: relative;
		text-align: center;		
		border: 1px dotted green;
	}

.wrpr {
		position: relative;
		left: -50%;
		float: left;
		list-style: none;
		margin: 0; padding: 0;
		border: 1px dotted blue;
	}

.navi a, .navi li  {
		float: left;
		padding: 10px; margin: 0;
		color: #3B6783;
		font-weight: bold;
		text-decoration: none;
	}

.navi li {padding: 0; margin: 0;}

.navi a:hover {
		text-decoration:none;
		background: lightblue url(navirobg.gif) repeat-x 0 0;
	}

.navi li a:hover {
		background: lightblue url(navirobg.gif) repeat-x 0 0;
	}
	</style>
</head>
<body>
	<div class="navi">
		<div class="navicontainer">
			<div class="wrpr">
				<a href="">Item # 1</a>
				<a href="">Next item (# 2)</a>
				<a href="">Do you have another item?</a>
				<a href="">#4</a>
				<a href="">What about more</a>
				<a href="">Done</a>
			</div>
		</div>
	</div>
	<div class="navi">
		<div class="navicontainer">
			<ul class="wrpr">
				<li><a href="">Item # 1</a></li>
				<li><a href="">Next item (# 2)</a></li>
				<li><a href="">Do you have another item?</a></li>
				<li><a href="">#4</a></li>
				<li><a href="">What about more</a></li>
				<li><a href="">Done</a></li>
			</ul>
		</div>
	</div>
 <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

HTML ↴

ПРИМЕР ↴