css hover не выполняется

Я хочу, чтобы изображение слегка увеличивалось в размерах при наведении курсора на него. Я знаю, что это довольно просто, но я искал хороший час над другими примерами и не могу понять, что мне не хватает. Я ценю помощь. Эти изображения сохраняются на моем компьютере.css hover не выполняется

Область

<link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
<embed src="73797^alarmclock.mp3"; autostart="true"; loop="true"; hidden="true";/> 

<body> 

    <img src ="alarm clock2.jpg"/> 

    <p> Pulling the sheets into my body, I begin to sink back into the bed... 
      uggh... my alarm clock... time to get up.. 

     <img style = "position:absolute; top:300px; right: 0px; z-index:1" 
      src="computer.jpg"/> 

     <IMG ID="grow" STYLE= "position:absolute; TOP:1157px; LEFT:599px; 
      WIDTH:47px; z-index:2; HEIGHT:47px" SRC="icon2.gif"/> 

</body> 

</html>

А вот stylesheet.css

#grow:hover { 
width: 100px; 
height: 150px; 
}

источник

2013-08-29 user2719596

Не использовать встроенные стили. Ваша проблема в том, что встроенные стили более приоритетны, чем CSS. Поместите их в свой 'stylesheet.css', и он будет работать. – Itay

Почему вы используете встроенные стили и CSS, которые грязны. – Sir

и все, что не указано в кавычках, должно быть строчным. Вы создали это в Microsoft Word или что-то еще? – PlantTheIdea

встроенный стиль который объявлен в HTML-элемент имеет более высокий приоритет, чем другие правила CSS , Поэтому рассмотрите свои правила !important или переместите встроенный стиль.

Во всяком случае, правила !important не рекомендуется использовать регулярно. Таким образом, вы лучше удалить свои встроенные стили и поместить их в .css файлов (или по крайней мере <style> элемента внутри <head>)

источник

2013-08-29 18:08:59

Это очень нецелесообразно использовать! Важно регулярно, особенно когда он может исправить это через минуту, прекратив использование встроенных стилей. – Itay

Я согласен с вами, я просто даю ему все доступные варианты. Думаю, я должен включить его в мой ответ :) –

Спасибо, ребята. Я заработал. Довольно новичок в этом. Больше нет встроенных стилей. – user2719596

Попробуйте этот стиль

#grow:hover { 
width: 100px !important; 
height: 150px !important; 
}

Потому что вы написали встроенные стили. Чтобы отменить его, вы должны добавить !important к стилям. Также попробуйте написать html в нижнем регистре и избежать нежелательных пробелов.

Самое лучшее, что вы можете сделать, это избежать встроенный стиль и писать стиль, как показано ниже:

#grow 
{ 
    position:absolute; 
    top:1157px; 
    left:599px; 
    width:47px; 
    z-index:2; 
    height:47px 
} 

#grow:hover 
{ 
    width: 100px; 
    height: 150px; 
}

источник

2013-08-29 18:09:39

Это будет работать, но не рекомендуется использовать '! Important', особенно когда он может исправить это через минуту, прекратив использование встроенных стилей. – Itay

Встроенные стили имеют приоритет над CSS я верю.

Измените свой CSS и HTML к следующему:

#grow { 
    position:absolute; 
    top:1157px; 
    left:599px; 
    width:47px; 
    z-index:2; 
    height:47px 
} 
#grow:hover { 
    width: 100px; 
    height: 150px; 
}

HTML:

<IMG ID="grow" SRC="icon2.gif"/>

источник

2013-08-29 18:10:24 Sir

css hover не выполняется

ответ

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