Додайте ефект наведення на всі елементи класу

I made a simple website, it looks like this: enter image description here

Але, як ви можете бачити, ефект "наведення" працює тільки на тому місці, де мишка насправді є! (тут ipsum) Але моя мета полягає в тому, щоб наведення на всіх елементах працювало! Тому я додав клас з ефектом hover p.hov: hover, але перегляньте його самостійно:


  

Lorem

ipsum

dolor

sit

amen

  

 p {    
color:#f2f2f2;
background:#ff4a4a;
font-size: 75px;
line-height: 74px;
font-weight:700;
margin: 0 5px 24px;
float:left;
padding: 10px;
margin: 0 5px 24px;
font-family: 'Route', serif;
   }

  p.hov:hover {box-shadow: 
 1px 1px #666,
 2px 2px #666,
 3px 3px #666;}

Перепрошую за мою англійську! І дякую!

2
До речі, текст заповнювача закінчується на "amet".
додано Автор Chris, джерело

10 Відповіді

Якщо ви хочете, щоб усі блоки мали тінь, помістіть наведені дані на батьківський елемент:

blockquote:hover p.hov {
    box-shadow: 
    1px 1px #666,
    2px 2px #666,
    3px 3px #666;
}
4
додано
Так працював! Дякую
додано Автор Em Sta, джерело

Якщо ви хочете, щоб усі блоки мали тінь, помістіть наведені дані на батьківський елемент:

blockquote:hover p.hov {
    box-shadow: 
    1px 1px #666,
    2px 2px #666,
    3px 3px #666;
}
4
додано
Так працював! Дякую
додано Автор Em Sta, джерело

Спробуйте це

blockquote:hover p.hov 

DEMO

3
додано
модифікована версія, так що ефект наведення шириною все ще залишається між словами:
додано Автор aaronjbaptiste, джерело

Instead use

tag for each one why wont use them all? Here an example:

HTML


   

Lorem

ipsum

dolor

sit

amen


CSS

blockquote:hover p.hov {
    box-shadow: 
    1px 1px #666,
    2px 2px #666,
    3px 3px #666;
}
3
додано
тоді ви втратите пробіл.
додано Автор J. Ghyllebert, джерело
так, але ваш CSS ще не має рації. Як він буде показувати тінь під блоком (і тим самим на пробіл).
додано Автор J. Ghyllebert, джерело
я маю на увазі пробіли між червоними блоками.
додано Автор J. Ghyllebert, джерело
Ой, правда, дай мені редагувати, голосувати мене
додано Автор copypaste, джерело
Краще зараз...??
додано Автор copypaste, джерело
Ви завжди можете додати & nbsp; ..
додано Автор copypaste, джерело
Sharp eye мій друг :)
додано Автор copypaste, джерело

Instead use

tag for each one why wont use them all? Here an example:

HTML


   

Lorem

ipsum

dolor

sit

amen


CSS

blockquote:hover p.hov {
    box-shadow: 
    1px 1px #666,
    2px 2px #666,
    3px 3px #666;
}
3
додано
тоді ви втратите пробіл.
додано Автор J. Ghyllebert, джерело
я маю на увазі пробіли між червоними блоками.
додано Автор J. Ghyllebert, джерело
так, але ваш CSS ще не має рації. Як він буде показувати тінь під блоком (і тим самим на пробіл).
додано Автор J. Ghyllebert, джерело
Краще зараз...??
додано Автор copypaste, джерело
Ой, правда, дай мені редагувати, голосувати мене
додано Автор copypaste, джерело
Sharp eye мій друг :)
додано Автор copypaste, джерело
Ви завжди можете додати & nbsp; ..
додано Автор copypaste, джерело

Спробуйте це, я думаю, це буде працювати для вас

.hov:hover{
    -moz-box-shadow:    3px 3px  #666; /*For Mozilla*/
    -webkit-box-shadow: 3px 3px  #666; /*For Chrome & safari*/
    box-shadow:         3px 3px  #666; /*For other*/   
}
2
додано
#motha:hover p{
    box-shadow: 
       1px 1px #666,
       2px 2px #666,
       3px 3px #666;
}
2
додано
#motha:hover p{
    box-shadow: 
       1px 1px #666,
       2px 2px #666,
       3px 3px #666;
}
2
додано

Ось відповідь:

HTML

  
  

Lorem

ipsum

dolor

sit

amen

  

CSS

p {    
color:#f2f2f2;
background:#ff4a4a;
font-size: 75px;
line-height: 74px;
font-weight:700;
margin: 0 5px 24px;
float:left;
padding: 10px;
margin: 0 5px 24px;
font-family: 'Route', serif;
   }

.highlight {box-shadow: 
 1px 1px #666,
 2px 2px #666,
 3px 3px #666;}

Сценарій (включайте jQuery):

$(".hov").mouseover(function(){
    $(".hov").addClass("highlight");
});

$(".hov").mouseout(function(){
    $(".hov").removeClass("highlight");
});
1
додано
Ти правий. тільки що побачив вашу відповідь. Значно краще
додано Автор Bilal Fazlani, джерело
Чому jquery?
додано Автор J. Ghyllebert, джерело

Можна спробувати наділити стилі на наведенні батьківських елементів всім дочірнім елементам.

#motha:hover p{
    box-shadow: 
     1px 1px #666,
     2px 2px #666,
     3px 3px #666;
}

якщо ви тільки хочете орієнтуватися на елементи, які мають клас .hov , ви також можете використовувати цей css

#motha:hover .hov{
    box-shadow: 
     1px 1px #666,
     2px 2px #666,
     3px 3px #666;
}
1
додано