Применение изменения состояния наведения к дочерним элементам

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

Я ищу лучший способ разместить цветной экран с надписью "view" над элементом .storybox, когда на него наведена мышь. Я могу изменить цвет фона, но мне нужно, чтобы изображение и текст также исчезали. Я попытался использовать .storybox: hover *, который меняет цвет фона всех элементов div, но не выцветает изображение и не меняет цвет в .storybox.

Answer 1

Просто используйте соответствующие селекторы и свойства:

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

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

Если вы хотите анимировать наведение курсора без JavaScript (без поддержки

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

Answer 2

Используйте o evento .live () для выполнения jquery. Прикрепите обработчик событий для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем.

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