对子元素应用悬停状态更改

我正在MVC 3/Razor上为日报的Web应用程序工作。我有一个局部视图，当他们发布到网站时加载故事。我需要做的是容纳每个故事的内容在悬停时更改。这是我一直在考虑的代码：我正在寻找把彩色屏幕，上面写着“观点”的最好办法对子元素应用悬停状态更改

.storybox { width: 220px; padding: 10px 10px 10px 10px; font-size: 11px; background-color: #ffffff; box-shadow: 0 1px 3px rgba(34,25,25,0.4); -moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4); -webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4); } 

.storybox-headline { font-size: 1.5em; color: #666666; font-weight: bold; text-align: center; } 

.storybox-byline { color: #999999; text-align: center; line-height: 1em; border-bottom: 1px solid #e5e5e5; padding-bottom: 3px; } 

.storybox-photo { position: relative; max-width: 192px; margin-top: 5px; margin-left: auto; margin-right: auto; } 

.storybox-date { color: #999999; line-height: 1.2em; }

：

<div id="storyboard"> 
@foreach (var box in Model.Stories) 
{ 
    <a class="storybox" href="@Url.Action("Story", new { storyID = box.StoryEventID })"> 
     <div class="storybox-headline"> 
      @box.Name 
     </div> 
     <div class="storybox-byline"> 
      @box.ByLine 
     </div> 
      @if (box.Photo != null) 
      { 
       <div class="storybox-photo"> 
        @Html.ImageForExtLink(box.Photo, ImageDimensions.Size.Medium) 
       </div> 
      } 
     <div class="storybox-date"> 
      Added on @box.StoryAdded 
     </div> 
    </a> 
}

而CSS当鼠标悬停在.storybox div上时。我可以改变背景颜色，但我需要图像和文字淡出。我尝试使用.storybox：hover *，它会更改所有div的背景颜色，但不会淡出图像或更改.storybox上的颜色。

来源

2011-12-16 Jens Grant

只要使用适当的选择和属性：

.storybox:hover, .storybox:hover * { 
    background-color: #f90; 
    color: #f90; 
} 

.storybox:hover .storybox-photo { 
    visibility: none; 
}

如果你想没有动画的JavaScript（不< IE9支持）悬停，但缓慢下降：

.storybox, .storybox * { 
    -webkit-transition: all 500ms ease; 
    -moz-transition: all 500ms ease; 
    -o-transition: all 500ms ease; 
    -ms-transition: all 500ms ease; /*IE10*/ 
    transition: all 500ms ease; 
} 

.storybox:hover, .storybox:hover * { 
    background-color: #f90; 
    color: #f90; 
} 

.storybox:hover .storybox-photo { 
    opacity: 0; 
}

来源

2011-12-16 19:40:34 Duopixel