對子元素應用懸停狀態更改

我正在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