Выпадающее меню;hover css не работает на элементах Sibling, но работает на потомках - PullRequest
Новая
       0

Выпадающее меню;hover css не работает на элементах Sibling, но работает на потомках

0 голосов
/ 07 февраля 2019

Ниже приведены два кода.Коды для выпадающего меню.Оба кода почти одинаковы, но с небольшой разницей.Я создал основной пункт списка для главного меню и дал ему классы.Затем я создал подменю и дал ему меню классов.Основной заголовок задается заголовком класса и имеет элемент в каждом элементе.Когда я применяю элемент ": hover" в (элемент привязки) в сочетании с элементом подменю (элемент раскрывающегося списка), код не работает.Хотя, если я применяю ": hover" к заголовку класса (класс элемента), выпадающий список работает.Я делюсь кодом, чтобы уточнить и быть более конкретным.Следующий код работает для выпадающего меню и имеет указатель на класс заголовка.Я прокомментировал код CSS, чтобы уточнить, на какую часть кода я ссылаюсь.

.menu{
	padding: 20px;
	background: #d80000;
}
.mainmenu{
	display: flex;
	list-style: none;
}
.heading{
	margin-right: 1px;
}
.mainmenu .heading a{
	display: inline-block;
	padding: 10px;
	text-decoration: none;
	background: #fff;
	color: #d80000;
	width: 80px;
	text-align: center;
	position: relative;
}

.submenu{
	list-style: none;
	margin-left: -40px;
	display: none;
	position: absolute;
}

.submenu a{
	border-top: 3px solid #d80000;
	width: 80px;
}

.heading a:hover{
	background: #d80000;
	color: #fff;
}

/* Here the hover and submenu element works to make the element display as block*/
.heading:hover .submenu{
	display: block;
}
<html>
	<head> 
		<title>Menu</title>
		<link rel="stylesheet" type="text/css" href="style5.css">
	</head>
	<body>
	<div class="menu">
			<ul class="mainmenu">
				<li class="heading"><a href="#">Home</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">About</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">Services</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">Products</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">Contact</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

Теперь я собираюсь опубликовать код, который не работает для выпадающего меню. В этом элементе применяется hover вместе с классом подменю. 

.menu{
	padding: 20px;
	background: #d80000;
}
.mainmenu{
	display: flex;
	list-style: none;
}
.heading{
	margin-right: 1px;
}
.mainmenu .heading a{
	display: inline-block;
	padding: 10px;
	text-decoration: none;
	background: #fff;
	color: #d80000;
	width: 80px;
	text-align: center;
	position: relative;
}

.submenu{
	list-style: none;
	margin-left: -40px;
	display: none;
	position: absolute;
}

.submenu a{
	border-top: 3px solid #d80000;
	width: 80px;
}

.heading a:hover{
	background: #d80000;
	color: #fff;
}

/* Here the hover on a and submenu element doesnot works to make the element display as block*/
.heading a:hover .submenu{
	display: block;
}
<html>
	<head> 
		<title>Menu</title>
		<link rel="stylesheet" type="text/css" href="style5.css">
	</head>
	<body>
	<div class="menu">
			<ul class="mainmenu">
				<li class="heading"><a href="#">Home</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">About</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">Services</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">Products</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">Contact</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

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

Ответы [ 3 ]

0 голосов
/ 07 февраля 2019

Вы не используете a во втором, поэтому используйте 

.heading a:hover .submenu{
    display: block;
}

здесь вы делаете ошибку: 

.heading:hover .submenu{
    display: block;
}
0 голосов
/ 07 февраля 2019

Используйте общий селектор брата , чтобы выбрать .submenu братьев и сестер .heading a:hover.EG: 

.heading a:hover ~ .submenu{
    display: block;
}

Однако теперь, когда вы перемещаете указатель вниз к самому подменю, вы больше не зависаете на a, поэтому подменю вернется к display:none;, чтобы решить это, мы можемнастаивайте на том, что .submenu сами являются display:block;, когда зависли.EG: 

.heading .submenu:hover {
    display: block;
}

Рабочая демонстрация: 

.menu{
	padding: 20px;
	background: #d80000;
}
.mainmenu{
	display: flex;
	list-style: none;
}
.heading{
	margin-right: 1px;
}
.mainmenu .heading a{
	display: inline-block;
	padding: 10px;
	text-decoration: none;
	background: #fff;
	color: #d80000;
	width: 80px;
	text-align: center;
	position: relative;
}

.submenu{
	list-style: none;
	margin-left: -40px;
	display: none;
	position: absolute;
}

.submenu a{
	border-top: 3px solid #d80000;
	width: 80px;
}

.heading a:hover{
	background: #d80000;
	color: #fff;
}

/* Use general sibling selector to select .submenu siblings of .heading a:hover*/
.heading a:hover ~ .submenu{
	display: block;
}
/* however, now when you move your pointer down to the submenu itself you're no longer hovering on the a so the submenu will go back to display none; To resolve this we can insist that the submenu themselves are display block when hovered: */
.heading .submenu:hover {
	display: block;
}
<html>
	<head> 
		<title>Menu</title>
		<link rel="stylesheet" type="text/css" href="style5.css">
	</head>
	<body>
	<div class="menu">
			<ul class="mainmenu">
				<li class="heading"><a href="#">Home</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">About</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">Services</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">Products</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">Contact</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>
0 голосов
/ 07 февраля 2019 
 .heading a:hover .submenu
                 ^

Там у вас есть потомок комбинатор. 

<li class="heading"><a href="#">Home</a>
     <ul class="submenu">

Здесь .submenu является родной элемент элемента a, а не потомок.

Вам нужен один из родственных комбинаторов

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...