Question

我正在使用MVC 3 / Razor在日常报纸的网络应用程序上工作。我有一个部分视图，即在将故事发布到网站时加载故事。我需要做的是让容器保持每个故事的内容在悬停时改变。这是我给出的代码：

<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上时，在屏幕上显示“查看”的彩色屏幕。我可以改变背景颜色，但我也需要图像和文字淡出。我尝试使用.storybox：hover *，它会更改所有div的背景颜色，但不会淡出图像或更改.storybox上的颜色。

Answer 1

使用o evento .live（）执行jquery。为现在和将来与当前选择器匹配的所有元素附加事件处理程序。

http://api.jquery.com/live/

Answer 2

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

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

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

如果你想在没有javascript的情况下为悬停设置动画（没有＆lt; 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;
}

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

2 个答案: