Изменение цвета фона при наведении курсора в горизонтальных неупорядоченных списках?

Question

Я делаю небольшой «login/register» -box, чтобы придерживаться верхней части страницы. Тем не менее, у меня возникают проблемы с получением горизонтального списка, чтобы изменить цвет фона при наведении. Вот код:

/* Regbox */ 
 
ul#regbox{ 
 
    width: auto; 
 
    position: fixed; 
 
    padding: 0; 
 
    float: left; 
 
    top: -15; 
 
    left: 0; 
 
} 
 
ul#regbox li{ 
 
    list-style: none; 
 
    display: inline; 
 
    background-color: rgba(77, 77, 77, 1); 
 
    padding: 5px; 
 
    box-shadow: 5px 5px 5px #000000; 
 
} 
 
ul#regbox li:last-child{ 
 
    border-bottom-right-radius: 5px; 
 
} 
 
ul#regbox li a{ 
 
    text-decoration: none; 
 
    padding: 5px; 
 
} 
 
a:hover{ 
 
background-color: rgba(100, 100, 100, 0.5); 
 
border-radius: 5px; 
 
}

<div id="regbox"> 
 
    <ul id="regbox"> 
 
     <li><a href="">Login</a> 
 
     <li><a>|</a> 
 
     <li><a href="">Register</a> 
 
     </ul> 
 
    </div>

Я хотел бы для записей списка, чтобы изменить цвет на парения похож на это:

ul#navigation{ 
 
    width: 12px; 
 
    float: left; 
 
    padding: 0; 
 
    position: fixed; 
 
} 
 
ul#navigation li{ 
 
    list-style: none; 
 
    background-color: rgba(77, 77, 77, 0.8); 
 
    float: left; 
 
    font-size: 20px; 
 
    margin: 0; 
 
    width: 70px; 
 
} 
 
ul#navigation li:last-child{ 
 
    border-bottom-left-radius: 5px; 
 
} 
 
ul#navigation li:first-child{ 
 
    border-top-left-radius: 5px; 
 
} 
 
ul#navigation li a{ 
 
    display: block; 
 
    padding: 5px; 
 
    text-decoration: none; 
 
} 
 
a:link, a:visited{ 
 
    color: rgb(0, 0, 0); 
 
} 
 
a:hover{ 
 
background-color: rgba(77, 77, 77, 0.5); 
 
border-radius: 5px; 
 
}

<nav> 
 
    <ul id="navigation"> 
 
    <li><a href="main.html">Home</a> 
 
    <li><a href="store.html">Store</a> 
 
    <li><a href="about.html">About</a> 
 
</ul> 
 
</nav>

Я попробовал настроить отображение «блокировать» при наведении, но это просто разбивает список.

Заранее спасибо за любую помощь

/Ивар

Answer 1

я псевдо-решил. Вместо этого я написал его, чтобы изменить цвет фона <li>, а не фон <a>. Она теперь выглядит/работает так:

ul#regbox{ 
 
    width: auto; 
 
    position: fixed; 
 
    padding: 0; 
 
    float: left; 
 
    top: -15; 
 
    left: 0; 
 
} 
 
ul#regbox li{ 
 
    list-style: none; 
 
    display: inline; 
 
    background-color: rgba(77, 77, 77, 1); 
 
    padding: 5px; 
 
    box-shadow: 5px 5px 5px #000000; 
 
} 
 
ul#regbox li:last-child{ 
 
    border-bottom-right-radius: 5px; 
 
} 
 
ul#regbox li a{ 
 
    text-decoration: none; 
 
    padding: 5px; 
 
} 
 
ul#regbox li:last-child:hover{ 
 
    background-color: rgba(64, 64, 64, 1); 
 
} 
 
ul#regbox li:first-child:hover{ 
 
    background-color: rgba(64, 64, 64, 1); 
 
}

<div id="regbox"> 
 
    <ul id="regbox"> 
 
     <li><a href="">Logga in</a> 
 
     <li><a>|</a> 
 
     <li><a href="">Registrera dig</a> 
 
     </ul> 
 
    </div>

Если у кого есть лучшее решение, я все уши!

Answer 2

#navcontainer ul 
 
{ 
 
margin: 0; 
 
padding: 0; 
 
list-style-type: none; 
 
text-align: center; 
 
} 
 

 
#navcontainer ul li { display: inline; } 
 

 
#navcontainer ul li a 
 
{ 
 
text-decoration: none; 
 
padding: .2em 1em; 
 
color: #fff; 
 
background-color: #036; 
 
} 
 

 
#navcontainer ul li a:hover 
 
{ 
 
color: #fff; 
 
background-color: #369; 
 
}

<div id="navcontainer"> 
 
<ul> 
 
<li><a href="#">Home</a></li> 
 
<li><a href="#">Store</a></li> 
 
<li><a href="#">About</a></li> 
 

 
</ul> 
 
</div>

Answer 3

Я сделал несколько изменений в исходный CSS и HTML.

(1) Избавиться от id на div, значения id должны быть уникальными на странице.

(2) На ребенка li, я использовал float: left вместо display: inline.

(3) Вы можете упростить правила парения следующим образом:

ul#regbox li:hover a { 
    background-color: rgba(64, 64, 64, 1); 
} 

Если вы держите "|" персонажа из тега a, тогда вам не нужно беспокоиться о том, как он парит над ним.

По большей части, вы были близки к хорошему решению, так что вам хорошо на вашем пути.

ul#regbox { 
 
    width: auto; 
 
    position: fixed; 
 
    padding: 0; 
 
    float: left; 
 
    top: -15; 
 
    left: 0; 
 
} 
 
ul#regbox li { 
 
    list-style: none; 
 
    float: left; 
 
    background-color: rgba(77, 77, 77, 1); 
 
    padding: 5px; 
 
    box-shadow: 5px 5px 5px #000000; 
 
} 
 
ul#regbox li:last-child { 
 
    border-bottom-right-radius: 5px; 
 
} 
 
ul#regbox li a { 
 
    text-decoration: none; 
 
    padding: 5px; 
 
} 
 
ul#regbox li:hover a { 
 
    background-color: rgba(64, 64, 64, 1); 
 
}

<div> 
 
    <ul id="regbox"> 
 
    <li><a href="">Logga in</a></li> 
 
    <li>|</li> 
 
    <li><a href="">Registrera dig</a></li> 
 
    </ul> 
 
</div>

Answer 4

Вы не закрыть эти Li теги и и использовать тот же идентификатор в ДИВ и ул. А также в вашем вопросе у вас есть дополнительный «}» после ul # regbox li a {}. Также комментарий в разделе css: hover.Если у Вас возникли вопросы спрашивай меня в комментариях

ul#regbox { 
 
    width:auto; 
 
    position: fixed; 
 
    padding: 0; 
 
    float: left; 
 
    top: -15; 
 
    left: 0; 
 
} 
 

 
ul#regbox li { 
 
    list-style: none; 
 
    display: inline; 
 
    background-color: rgba(77, 77, 77, 1); 
 
    padding: 5px; 
 
    box-shadow: 5px 5px 5px #000000; 
 
} 
 

 
ul#regbox li:last-child { 
 
    border-bottom-right-radius: 5px; 
 
} 
 

 
ul#regbox li a { 
 
    text-decoration: none; 
 

 
} 
 

 
ul#regbox li:hover { 
 
    background: blue; /* you can use your color */ 
 
    border-radius: 5px; 
 
color:white; /* set this for text color you can remove this*/ 
 
}

<div> 
 
    <ul id="regbox"> 
 
<li><a href="">Login</a></li> 
 
<li><a>|</a></li> 
 
<li><a href="">Register</a></li> 
 
    </ul> 
 
</div>