0

我做了一个简单的网站，它看起来像这样： 在此处输入图像描述

但是，如您所见，悬停效果仅适用于鼠标实际所在的位置！（这里是 ipsum）但我的目标是悬停适用于所有元素！所以我添加了一个带有悬停效果 p.hov:hover 的类，但自己看：

<span id="motha">
  <blockquote>
  <p class="hov">Lorem</p> 
  <p class="hov" >ipsum</p>
  <p class="hov" >dolor</p> 
  <p class="hov" >sit</p>
  <p class="hov" >amen</p>
  </blockquote>
  </span>

 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;}

对不起我的英语不好！谢谢！

4

7 回答 7

5

如果您希望所有块都有阴影，请将鼠标悬停在父元素上：

blockquote:hover p.hov {
    box-shadow: 
    1px 1px #666,
    2px 2px #666,
    3px 3px #666;
}
于 2013-06-21T07:51:03.857 回答
3

而是<p>为每个使用标签，为什么不使用它们？这里有一个例子：

HTML

<span id="motha">
   <blockquote>
      <p class="hov">Lorem</p>
      <p class="hov" >ipsum</p>
      <p class="hov" >dolor</p>
      <p class="hov" >sit</p>
      <p class="hov" >amen</p>
   </blockquote>
</span>

CSS

blockquote:hover p.hov {
    box-shadow: 
    1px 1px #666,
    2px 2px #666,
    3px 3px #666;
}
于 2013-06-21T07:51:30.030 回答
3

尝试这个

blockquote:hover p.hov

演示

于 2013-06-21T07:52:15.897 回答
2 
#motha:hover p{
    box-shadow: 
       1px 1px #666,
       2px 2px #666,
       3px 3px #666;
}
于 2013-06-21T07:48:42.067 回答
2

试试这个，我想它对你有用

.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*/   
}
于 2013-06-21T07:59:20.297 回答
1

您可以尝试将父元素悬停时的样式赋予所有子元素。 

#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;
}
于 2013-06-21T07:53:29.107 回答
1

这是你的答案：

HTML

  <span id="motha">
  <blockquote>
  <p class="hov">Lorem</p> 
  <p class="hov" >ipsum</p>
  <p class="hov" >dolor</p> 
  <p class="hov" >sit</p>
  <p class="hov" >amen</p>
  </blockquote>
  </span>

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");
});
于 2013-06-21T07:57:58.027 回答