jquery - 将悬停状态更改应用于子元素

Question

我正在使用 MVC 3/Razor 开发日报的网络应用程序。我有一个部分 View 正在加载发布到网站的故事。我需要做的是让包含每个故事内容的容器在悬停时发生变化。这是我得到的代码:

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

我正在寻找最好的方法来在鼠标悬停在 .storybox div 上时放置一个显示“ View ”的彩色屏幕。我可以更改背景颜色，但我也需要图像和文本淡出。我尝试使用 .storybox:hover *，它会更改所有 div 的背景颜色，但不会淡出图像或更改 .storybox 上的颜色。

Answer 1

只需使用适当的选择器和属性:

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