Закругление углов посредством CSS + hover: как?

Captain Fizz · February 24, 2010

Изучив тему, я задался вопросом - можно ли сделать изменяющийся фон у блока с закругленными углами при наведении на него мыши, без использования картинок.

Допустим имеем сайт, вверху пункты меню с закругленными верхними левым и правым углами. Наводим мышь на любой из пунктов меню, он меняет цвет. Блоки с пунктами меню резиновые, то есть их ширина может изменяться. Также каждый блок/п.меню является ссылкой. Наводим мышь на любой блок/п.меню и цвет фона его меняется, включая и уголки.

То есть вопрос в том, чтобы эмулировать стилевой атрибут border-radius (-moz-border-radius) для поддержки браузеров ИЕ7+, Опера 9.5+.

Решаема ли задача только средствами исключительно CSS, без изображений и Javascript?

klierik · February 25, 2010

нет.

в css указывать стилизирование родительным объектам нельзя.

Great Rash · February 25, 2010

Да ладно, все можно сделать. Надо просто ссылку (<a>) сделать блочным элементом а внутри какими-нибуть спанами намутить круглые углы и менять их цвет по ховеру.

Captain Fizz · February 25, 2010

Если создавать уголки средствами CSS, то собственно уголки и ссылки будут суть разными элементами, соответственно и hover будет изменять цвет бекграунда только одного из них(на который наведена мышь), а не всех одновременно.

То есть проблема состоит в том, чтобы по hover менять цвет бекграунда у нескольких слоев/элементов одновременно, которые в общем случае могут быть и в разных местах диза.

На ум приходит решение по hover прикрывать полупрозрачным дивом пункты меню, однако этот вариант подходит далеко не не для всех дизайнов.

Может у кого еще есть идеи? Проблема на самом деле достаточно актуальная.

Great Rash · February 25, 2010

Вы вообще о чем?


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Фильтр</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 11px "Trebuchet MS", Verdana, Tahoma, sans-serif;
		}

		body {
			margin: 10px;
		}

		.cont {
			display: block;
			width: 100px;
		}

		.cont span {
			display: block;
			background: red;
		}

		.cont:hover span {
			background: green;
		}

		.txt {
			padding: 0 5px;
		}

		.c1 {
			height: 1px;
			margin: 0 5px;
		}

		.c2 {
			height: 1px;
			margin: 0 3px;
		}

		.c3 {
			height: 1px;
			margin: 0 2px;
		}

		.c4 {
			height: 2px;
			margin: 0 1px;
		}
	</style>

</head>

<body>

	<a href="#" class="cont">
		<span class="c1"></span>
		<span class="c2"></span>
		<span class="c3"></span>
		<span class="c4"></span>
		<span class="txt">
			text
		</span>
		<span class="c4"></span>
		<span class="c3"></span>
		<span class="c2"></span>
		<span class="c1"></span>
	</a>

</body>
</html>

Captain Fizz · February 25, 2010

Спс Great Rash, работает, надеюсь что и ИЕ6 не выскажет свое "особое мнение".

Фишка примера в .cont span {display: block...}, .cont:hover span.

А кто-то еще заявляет что наследование не работает.

Не перестаю удивляться массе дизайнеров, упорно генерирующих килобайты Javascript и нарезанные картинки, когда можно сделать все проще и элегантнее.

Edited February 25, 2010 by Captain Fizz

Sign In

Закругление углов посредством CSS + hover: как?

Question

Captain Fizz

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Captain Fizz

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Captain Fizz

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information