Hover не работает

illya05 · Регистрация: 03.08.2013

Author24 — интернет-сервис помощи студентам

Делаю меню. Оно состоит из списка и ссылки в нем. И сделал смену цвета фона <li></li> в этом меню, но color текста (ссылки) не меняется.

http://units.stuzer.link/
CSS http://localhost:8080/units/app/tpl/css/style.css

Что-бы меню появилось нужно кликнуть на "Stuzer05"

Добавлено через 30 секунд
И еще я не могу это ссылка вертикально по центру сделать

Комментарий модератора

выложите код. ссылка на ваш локалхост откроется только у вас.

@Monty161 · 27.12.2015, 21:43

illya05, зачем людям ссылка на твой локалхост?)
Код в студию

@newJS · 28.12.2015, 08:22

Сообщение от illya05

но color текста (ссылки) не меняется.

Скорей всего дело в этом.
Цвет текста у ссылки можно поменять только задав новый цвет самой ссылке, ссылки не наследуют цвет текста.
Это связано с раскраской ссылок самим браузером, типа посещённая/не посещённая.

Сообщение от illya05

И сделал смену цвета фона <li></li> в этом меню, но color текста (ссылки) не меняется.

Железная логика.

illya05 · 29.12.2015, 01:20 **[ТС]**

Monty161, ой. del

Сообщение от newJS

Железная логика.

Имел ввиду, что в одно css классе меняется и фон и цвет текста.
Как мне изменить цвет той ссылки при наведении на li?

CSS

body{
    margin: 0;
    color: #FFF;
    font-size: 12px;
    font-family: purista-web,sans-serif;
    background-image: url(../images/bg/background.png);
    background-repeat: repeat-y;
    background-position: center top;
    background-attachment: fixed;
}
 
#header{
    width: 100%;
    background-image: url(../images/bg/header_background.png);
    background-repeat: repeat;
    background-color: #000;
}
 
.list-unstyled{
    margin: 0;
    list-style: none;
}
 
#header>div>.list-unstyled>li{
    height: 44px;
    position: relative;
    vertical-align: middle;
    display: table-cell;
    color: #FFF;
    padding: 0 10px;
}
 
a{
    color: #FFF;
    text-decoration: none;
}
 
#header>div>.list-unstyled>.list-cell a{
    outline: 0;
    transition: all .5s;
}
 
#header>div>.list-unstyled>.list-cell a:hover{
    color: #8D90FF;
}
 
#header>div>.list-unstyled>.list-cell{
    border-left: 1px solid #444;
}
 
.unit-links>.list-unstyled>li{
    height: 44px;
    position: relative;
    vertical-align: middle;
    display: table-cell;
    color: #FFF;
    padding: 0 10px;
}
 
.pull-left{
    float: left !important;
}
 
.pull-right{
    float: right !important;
}
 
.center-block{
    margin-left: auto;
    margin-right: auto;
}
 
.body{
    max-width: 1170px;
    min-width: 500px;
}
 
.unit-header-bg{
    width: auto;
    height: 400px;
    border: 1px solid #333;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1;
    box-shadow: 0 0 5px #000;
}
 
.unit-header{
    font-size: 16px;
    position: relative;
    margin-top: -85px;
    margin-left: -15px;
    margin-right: -15px
}
 
.unit-header-left{
    width: calc(25% - 30px);
    margin: 0 10px;
}
 
.unit-header-right{
    width: calc(75% - 30px);
    margin: 0 10px;
}
 
.unit-body{
    font-size: 16px;
    position: relative;
    margin-left: -15px;
    margin-right: -15px
}
 
.unit-body-left{
    width: calc(25% - 30px);
    margin: 0 10px;
}
 
.unit-body-right{
    width: calc(75% - 30px);
    margin: 0 10px;
}
 
.unit-logo-container{
    min-height: 1px;
    background-color: rgba(0,0,0,.65);
    padding: 10px;
    margin-bottom: 30px;
}
 
.unit-logo{
    max-width: 100%;
}
 
.unit-title-container{
    text-align: left;
    font-size: 35px;
    padding: 5px 10px 8px 10px;
    margin: 0 0 50px 0;
    background-color: rgba(0,0,0,.5);
}
 
.unit-subheader{
    position: absolute;
    top: -42px;
    right: 30px;
    height: 22px;
    padding: 10px;
    background-color: rgba(0,0,0,.19);
}
 
.unit-links{
    margin-top: 5px;
}
 
.unit-links-li{
    margin: 0 5px;
}
 
.panel{
    min-height: 70px;
    font-size: 16px;
    border: 1px solid #575757;
    background-color: rgba(0,0,0,.21);
}
 
.unit-table-responsive{
    width: 100%;
    font-size: 17px;
    text-align: left;
    border-spacing: 0 1px;
    border: 1px solid #5F5F5F;
}
 
.unit-table-responsive tbody tr th{
    padding: 5px 10px;
    border-top: 1px solid #5F5F5F;
}
 
.unit-table-responsive-left-colomn{
    width: 40%;
}
 
.unit-table-responsive-right-colomn{
    width: 60%;
    font-weight: normal;
}
 
.unit-table-responsive-icon{
    padding: 0 5px;
}
 
.table-no-border{
    border: 0 !important;
}
 
.padded{
    padding: 10px;
}
 
.box-shadow{
    box-shadow: 0 0 10px #000;
}
 
.box-black{
    background-color: rgba(0,0,0,.5) !important;
}
 
.box-black-opaque{
    background-color: #000 !important;
}
 
.text-shadow{
    text-shadow: 1px 1px 1px #000;
}
 
.no-margin{
    margin: 0 !important;
}
 
.no-padding{
    padding: 0 !important;
}
 
.text-dark-green{
    color: #78A948;
}
 
p{
    margin: 0;
}
 
#login-user-wrapper{
    height: 44px;
    vertical-align: middle;
    background-color: #2f475f;
}
 
#login-user-wrapper-icon{
    height: 44px;
    /*float: left;*/
    padding: 0 5px;
    background-color: #3e5b79;
}
 
#login-user-wrapper-url{
    margin-bottom: 0;
    font-size: 14px;
    background-color: #2f475f;
}
 
.float-left{
    float: left;
}
 
.float-clear{
    clear: both;
}
 
.btn{
    text-align: center;
    border: 1px solid transparent;
}
 
.btn-grey{
    color: #000;
    padding: 10px;
    border-color: rgba(0,0,0,.1);
    background-color: #757575;
    font: normal normal normal 14px/1 FontAwesome;
    transition: color .5s,opacity .5s,border-color .5s,background-color .5s;
}
 
.btn-grey:hover{
    color: #FFF;
    background-color: #000;
}
 
.unit-links-btn{
    font-size: 18px; 
}
 
#dropdown-menu{
    position: absolute;
    left: 0;
    z-index: 1000;
    min-width: 160px;
    top: 100%;
    font-size: 14px;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    background-clip: padding-box;
    background-color: #000;
    display: none;
}
 
#dropdown-menu-list-unstyled{
    color: #FFF;
    padding: 0;
    background-color: rgba(0,0,0,.5);
}
 
#dropdown-menu-list-unstyled .dropdown-menu-list-li{
    height: 40px !important;
    min-width: 100% !important;
    color: #FFF;
    display: block;
    padding: 0 !important;
    transition: all .5s;
}
 
#dropdown-menu-list-unstyled .dropdown-menu-list-li:hover{
    color: #8D90FF;
    cursor: pointer;
    background-color: #2F2F2F;
}
 
#dropdown-menu-list-unstyled .dropdown-menu-list-li a{
    vertical-align: middle;
}
 
#dropdown-menu-list-unstyled .dropdown-menu-item-line{
    height: 1px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    cursor: default;
    border-bottom: 1px #FFF solid;
}
 
.tooltip{
    position: absolute;
    width: 100px;
    z-index:999;
    text-align: left;
    border-radius: 5px;
    top: 100%;
    left: 0;
    display: none;
}
 
.tooltip p{
    margin:0;
    padding:0;
    color:#fff;
    background-color:#000;
    padding:2px 7px;
}
 
.unit-navigation-tabs{
    
}
.unit-navigation-tabs > div{
    width: 100%;
}
.unit-navigation-tabs ul{
    margin:0px;
    padding:0px;
}
.unit-navigation-tabs ul:after{
    content: "";
    display: block;
    clear: both;
}
.unit-navigation-tabs ul li{
    margin: 0 1px 0 0;
    padding: 0px;
    cursor: pointer;
    display: block;
    float: left;
    padding: 10px 15px;
    background: #000;
    color: #fff;
    opacity: 0.5;
    margin-bottom: -1px;
}
.unit-navigation-tabs ul li.active, .unit-navigation-tabs ul li.active:hover{
    background: #000;
    color: #fff;
    opacity: 1.0;
    border: 1px solid #575757;
}
.unit-navigation-tabs ul li:hover{
    background: #000;
    color: #555;
    opacity: 1.0;
}
 
.spoiler{
    border: 1px solid #000;
    margin-top: 20px;
}
.spoiler-header{
    height: 24px;
    padding: 15px;
    margin: 0;
    background-color: #000;
    cursor: pointer !important;
}
.spoiler span{
    font-size: 16px;
}
.spoiler-body{
    display: none;
    padding: 15px;
    min-height: 1px;
}
.spoiler-body li a:hover{
    color: #FFF;
    transition: all .5s;
}
 
.h3{
    font-size: 20px !important;
}
 
.bg-grey{
    background-color: #151515;
}
 
.typed-cursor{
    opacity: 1;
    font-size: 25px;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

Комментарий модератора

код нужно размещать на форуме, а не давать на него ссылки

@Protos73 · 29.12.2015, 10:38

Попробуй такую структуру.

CSS

1	.class li:hover a {color:#red;}

Ну и ссылки в лишках оберни в тег <a>

illya05 · 29.12.2015, 16:55 **[ТС]**

Protos73, Огромное спасибо!
Я еще не мог ее по центру сделать. Не подскажите как? vertical-align: middle; не работает

@Protos73 · 29.12.2015, 17:08

Могу предложить вместо пустой лишки рисующей линию использовать бордер. К примеру так.

CSS

#dropdown-menu-list-unstyled .dropdown-menu-list-li {
    margin-top: 10px;
    text-align: center;
    border-bottom: 1px solid;
}
#dropdown-menu-list-unstyled .dropdown-menu-item-line {
    display:none;
}

illya05 · 29.12.2015, 17:18 **[ТС]**

разобрался.

Добавлено через 28 секунд

CSS

#dropdown-menu-list-unstyled .dropdown-menu-list-li{
    color: #FFF;
    display: block;
    padding: 10px !important;
    transition: all .5s;
}

@Monty161 6 / 6 / 6 Регистрация: 01.09.2015 Сообщений: 52
	27.12.2015, 21:43	2
	illya05, зачем людям ссылка на твой локалхост?) Код в студию 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	28.12.2015, 08:22	3
	Сообщение от illya05 но color текста (ссылки) не меняется. Скорей всего дело в этом. Цвет текста у ссылки можно поменять только задав новый цвет самой ссылке, ссылки не наследуют цвет текста. Это связано с раскраской ссылок самим браузером, типа посещённая/не посещённая. Сообщение от illya05 И сделал смену цвета фона <li></li> в этом меню, но color текста (ссылки) не меняется. Железная логика. 0

illya05 140 / 96 / 47 Регистрация: 03.08.2013 Сообщений: 765
	29.12.2015, 16:55 [ТС]	6
	Protos73, Огромное спасибо! Я еще не мог ее по центру сделать. Не подскажите как? vertical-align: middle; не работает 0

	29.12.2015, 17:18

Hover не работает

Решение