Изменить цвет текста внутри окна при наведении

-1

Итак, сейчас я сам преподаю себе html и CSS, и у меня есть небольшая проблема. В моей строке меню у меня есть некоторые элементы списка, которые я хочу изменить цвет, когда мышь нависает над ящиком, но я не уверен, как это сделать. Сейчас у меня есть:Изменить цвет текста внутри окна при наведении

#Menu li:hover{ 
    background-color: rgba(255,165,0,0.5) 
} 

#Menu li a:hover{ 
    color: black; 
}

Но это делает его там, где, когда я парить над текстом его изменения и только изменения коробки. Я пробовал:

#Menu li:hover{ 
    background-color: rgba(255,165,0,0.5) 
    color: black; 
}

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

#Menu { 
 
    height: 40px; 
 
    background-color: rgb(255,165,0); 
 

 
} 
 
#Menu ul{ 
 
    margin:auto; 
 
    padding:0; 
 
} 
 

 
#Menu li { 
 
    list-style-type: none; 
 
    float: left; 
 
    display: block; 
 
    width:20%; 
 
    height:40px; 
 
    text-align: center; 
 
    line-height:40px; 
 
    font-family: inherit; 
 
    font-size:16px; 
 
} 
 

 
#Menu li a{ 
 
    text-decoration: none; 
 
    color:white; 
 
    position: fixed; 
 

 
} 
 

 
#Menu li:hover { 
 
    background-color: #FFB733; 
 

 
} 
 

 
#Menu li a:hover { 
 
    color: black; 
 
}

<html> 
 
    <head> 
 
    <style type="text/css"> 
 
     body { 
 
     margin: 0; 
 
     } 
 
    </style> 
 
    </head> 
 
    
 
    <body> 
 
    <div id="Menu"> 
 
     <ul> 
 
     <li><a href="#">Cat</a></li> 
 
     <li><a href="#">Dog</a></li> 
 
     <li><a href="#">Mouse</a></li> 
 
     </ul> 
 
    </div> 
 
    </body> 
 
</html>

изменения: Добавлен фрагмент кода

источник

2015-05-04 Flameancer

Поделитесь примером html. –

@Flameancer, если на 'hover' вы хотите изменить цвет текста, который вы должны написать, например' #Menu li: hover a {color: red;} 'Этот код означает, что' hovering' над 'li',' a' anchor тег также будет выполнен. проверьте демоверсию. http://jsbin.com/metihaneyu/1/edit –

#Menu li { 
    transition: 2s; 
} 

#Menu li:hover { 
    background-color: rgba(255,165,0,0.5); 
    color: red; 
}

Смотрите пример http://jsfiddle.net/k35rdfhp/1/

Изменение пункт цвет фона и цвет при наведении курсора окно пункта, а не только текст.

источник

2015-05-04 03:04:02

Без сомнения, это работает, потому что я просто попробовал это прямо сейчас, но почему-то это не работает в моей, и я понятия не имею, почему? Пробовал и в 3 отдельных браузерах. – Flameancer

@Flameancer иногда другой код css на странице может вмешиваться. Если какое-либо свойство не вступает в силу, попробуйте добавить '! Important' в конце значения свойства. –

Попробуйте указать цвет для #Menu li:hover a - http://jsfiddle.net/k35rdfhp/2/

#Menu li a:hover, #Menu li:hover a { 
    color: black; 
}

источник

2015-05-04 03:37:00 ASR

Я изменил ответ ASR и добавил переходы it.CSS3 имеет ряд встроенных в анимации, которые не требуют Javascript или других JS библиотеки использовать

#Menu li:hover { 
    background-color: #FFB733; 
    background: red; 
    transition-property: background; 
    transition-duration: 1s; 
    transition-timing-function: linear; 
}

http://jsfiddle.net/j863v3t7/

источник

2015-05-04 04:25:45 danidee

Изменить цвет текста внутри окна при наведении

ответ

Смежные вопросы