Почему наведение мыши охватывает только текстовую часть, а не весь блок li? - PullRequest
Новая
       5

Почему наведение мыши охватывает только текстовую часть, а не весь блок li?

0 голосов
/ 01 февраля 2020

Я пытаюсь дать эффект наведения на li, который, кажется, покрывает только текстовую часть, а не всю li-box. Интересно, почему так происходит? 

*{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
html, body{
margin: 0;
padding: 0;
}

.container {
display: grid;
background-color: rosybrown;
border: 1px solid black;
justify-items: center;
}
.heading{
order: 2;
}

.main-nav{
order:1;
text-align: center;
width: 100%;
border-bottom: 1px solid rebeccapurple;
padding: .5em;
}

.main-nav ul{
 margin:0;
 }
.main-nav li:hover{
background-color: rgba(255,255,255,0.3);
}

 ul{
 padding: 0;
 }
 .main-nav li{
 display: inline;
 margin: 1em;
    
 }
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="trialStyle.css">
 </head>
 <body>
  <div class="container">
    <h1 class="heading">The Love</h1>
    <nav class="main-nav">
        <ul class="ulContainer">
        <li>Home</li>
        <li>About</li>
        <li>Store</li>
    </ul>
    </nav>
 </div>
</body>
   </html>

Ответы [ 3 ]

3 голосов
/ 01 февраля 2020

Эффект наведения мыши охватывает только текстовую часть, поскольку это размер отображаемого элемента li. Если вы хотите получить эффект над блоком, вы можете использовать padding вместо margin CSS свойство:

См. Приведенную ссылку школ W3 ниже 

*{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}

html, body{
margin: 0;
padding: 0;
}

.container {
display: grid;
background-color: rosybrown;
border: 1px solid black;
justify-items: center;
}

.heading{
order: 2;
}

.main-nav{
order:1;
text-align: center;
width: 100%;
border-bottom: 1px solid rebeccapurple;
padding: .5em;
}

.main-nav ul{
 margin:0;
 }

.main-nav li:hover{
background-color: rgba(255,255,255,0.3);
}

 ul{
 padding: 0;
 }

 .main-nav li{
 display: inline;
 /*padding: 1em;
 padding-bottom: 0.5em;*/
 padding: .5em;
 }
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="trialStyle.css">
 </head>
 <body>
  <div class="container">
    <h1 class="heading">The Love</h1>
    <nav class="main-nav">
        <ul class="ulContainer">
        <li>Home</li>
        <li>About</li>
        <li>Store</li>
    </ul>
    </nav>
 </div>
</body>
   </html>

CSS Коробочная модель

1 голос
/ 01 февраля 2020

Вы можете добавить отступы, чтобы освободить место вокруг текста и навести на него курсор. 

 .main-nav li{
 display: inline;
 margin: 1em;
 padding: 1em;

 }
0 голосов
/ 01 февраля 2020

Если я правильно понимаю, вы пытаетесь заставить элемент li покрыть всю высоту бара. Если это так, то проблема заключается в том, что вам нужно установить высоту элемента li на 100%. Поэтому отредактируйте ваш скрипт css, чтобы он выглядел примерно так: 

.main-nav li{
display: inline;
margin: 1em;
height:100%;
}

* По сути, текст - это весь элемент, потому что размеры не заданы, поэтому вы должны установить их следующим образом.

...