Изменение дочернего элемента при наведении на родительский с помощью CSS
slogin.info

ihc 468x60 1 1
Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна0 / 5
 
Автор: Администратор
Просмотров: 3851
Теги: css, div, css3, children, parent

В этой статье мы рассмотрим не сложный способ для изменения внутреннего элемента при наведении на родительский.

Этот способ подойдет не всегда, так как тут не будет использоваться javascript, но для многих задач он будет предпочтителен по этой же причине.

Допустим у нас есть родительский <div> какой-то текст в нём и ещё один <div> с классом child. Последний представляет из себя прямоугольную область с желтым цветом.

Сдалем так, что при наведении на родительский <div> мы будем плавно изменять цвет дочернего(child).

Вот код примера:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta name="viewport" content="width=device-width" />    
<link rel="stylesheet" href="/../28/css/template.css" type="text/css" />
<title>Страница</title>
</head>
<body>
	<div>
		Не следует, однако забывать, что постоянное информационно-пропагандистское обеспечение нашей деятельности влечет за собой процесс внедрения и модернизации существенных финансовых и административных условий. Товарищи! укрепление и развитие структуры способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям. Значимость этих проблем настолько очевидна, что укрепление и развитие структуры играет важную роль в формировании позиций, занимаемых участниками в отношении поставленных задач.
		<div class="child">
		</div>
	</div>
</body>
</html>
/* Общие стили */
body {
	margin:0;
}
/* Общие стили закончилась */


div {
	text-align:center;
	border:1px solid #000;
	width:80%;
	margin:40px auto;
}
	div div.child {
		background:#FFFF00;
		width:50%;
		height:200px;
		margin:0 auto;
		border:none;
		transition:1s;
	}
	
	div:hover div.child {
		background:#006600;
	}

Здесь стоит обратить внимание на 20 строчку, свойство transition задает скорость плавной смены цвета фона. И на строку 23, которая и отвечает за смену фона при наведении на родительский элемент. На самом деле тут всё просто, мы приписываем псевдокласс :hover к родительскому а затем дополняем селектор указателем на дочерний child-элемент.

Результат можете посмотреть на демо-странице:

demo

Уникальность этого метода в том, что тут используется лишь чистый HTML+CSS, что не может не радовать. Применяя этот способ вы сможете решить какие-то из своих проблем и сделать что-то красивое.

Добавить комментарий

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
  • Hozephlof
    3.00
  • JesseBLamurb
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

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

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Удобное собрание CSS хаков для самых популярных браузеров

Для каждого хорошего верстальщика в какой-то момент времени встает вопрос кроссбраузерности. Что такое кроссбраузерность? Это свойство сайта или дизайна сайта отображаться одинакого в разных барузерах. Дело в том, что при создании браузеров разработчики не сильно задумываются о стандартизации, это порождает разное представление одного и того же сайта в их продукции. Создание кроссбраузерной верстки/сайта и позволяет преодолеть эту разницу.

Теги:

css, хаки, hacks, читы

Комментариев: 0 Подробнее
!important в CSS Просмотров 1844
!important в CSS

Часто бывает, что люди, давно изучающие CSS, не имеют представления или не понимают до конца как работает директива !important в CSS. В этой статье я постараюсь описать её действие и показать пару примеров, такая статья так же пригодится тем, кто только начал изучать CSS.

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее
Как подключать свои шрифты на сайт, или все о @font-face в CSS

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

Теги:

css, css3, @font-face, font, шрифт

Комментариев: 0 Подробнее

Последнее с форума

intuit89 аватар
До конца июля мы предлагаем интеграцию CRM системы абсолютно бесплатно. В пакет входит: Полный функ...
Перейти в тему
chelnokoff111 аватар
Здесь смотря по вашему бюджету, огромный траффик с яндекс директа , но это довольно не дёшево....
Перейти в тему
intuit89 аватар
Здравствуйте! Наша команда занимается созданием и продвижением сайтов под ключ. Основная часть сотр...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.