CSS hover не работает для моих divs

-1

Я не могу получить эффект CSS наведения для работы с моими div.CSS hover не работает для моих divs

Вот HTML:

<!doctype html><!--HTML5--> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"/> 
    <link rel="stylesheet" type="text/css" href="chaosMain.css"/> 
</head> 
<body> 
    <div id="featuredContent1"></div> 
</body> 
</html>

Вот CSS для этого:

html{ 
     margin:0px; 
     padding:0px; 
     height:100%; 
     width:100% 
    } 
    body{ 
     margin:0px; 
     padding:0px; 
     height:100%;  
     width:100%; 
     background-color:#F0F0F0; 
     color:#F0F0F0; 
    } 
    div{ 
     position:fixed; 
    } 

    #featuredContent1{ 
     margin-left:8.5%; 
     margin-top:11.7%; 
     width:23%; 
     height:40%; 
     background-color:#F26E24; 
     z-index:-1;  
     border-radius:2px; 
    } 
    #featuredContent1:hover { 
     width:25%; 
     height:42%; 
    }

Я не могу найти то, что случилось с ним, но зависать не имеет никакого эффекта.

источник

2014-11-19 James Roach

см. Демонстрацию в моем ответе –

удалить эту строку из # featuredContent1 стиля

z-index:-1;

код

html{ 
 
     margin:0px; 
 
     padding:0px; 
 
     height:100%; 
 
     width:100% 
 
    } 
 
    body{ 
 
     margin:0px; 
 
     padding:0px; 
 
     height:100%;  
 
     width:100%; 
 
     background-color:#F0F0F0; 
 
     color:#F0F0F0; 
 
    } 
 
    div{ 
 
     position:fixed; 
 
    } 
 

 
    #featuredContent1{ 
 
     margin-left:8.5%; 
 
     margin-top:11.7%; 
 
     width:23%; 
 
     height:40%; 
 
     background-color:#F26E24; 
 
      
 
     border-radius:2px; 
 
    } 
 
    #featuredContent1:hover { 
 
     width:25%; 
 
     height:42%; 
 
    background:red; 
 
    }

<body> 
 
    <div id="featuredContent1"></div> 
 
</body>

источник

2014-11-19 17:07:36

Как показано в ответ A B, это вызвано отрицательным z-index. Дива технически скрыт за телом, поэтому мышь никогда не витает на div.

Рассматриваемый с «стороны» это будет выглядеть следующим образом:

------------------ (top) 
------------------ body 
------------------ element

Итак, ваша мышь всегда парит тело, но никогда не парит элемент.

источник

2014-11-19 17:19:55

CSS hover не работает для моих divs

ответ

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