子元素和父元素的css3事务处理速度不同

时间:2015-10-23 21:48:30

标签: css css3 css-transitions

父母和子女的div可以有不同的交易速度吗?

i.g。父母将在4秒内过渡,而孩子将在1秒内对同一事件作出反应。对子级和父级都更改了相同的属性。

示例here

HTML

<div class="d1">
    Parent div<br/>
    Parent div
    <div class="d2">
        HOVER ME
    </div>    
</div>

CSS

.d1 {
    background-color: #F32423;
    transition: all 4s linear;
    height: 200px;
    width: 200px;
}
.d1:hover {
    opacity: 0.2; 
    margin-left:40px;   
}
.d2 {
    background-color: #FFFF2F;
    transition-duration: 1s;
    height: 100px;
}

如果将鼠标悬停在子div上,则可以看到子元素忽略transition-duration: 1s;。我想要的是让子元素转换速度快4倍。

2 个答案:

答案 0 :(得分:0)

我找到了解决方案。我们需要的是重复应该在子元素中转换的父元素的属性。因此,在特殊情况下,还应为子元素重复悬停属性的父级。

.d1:hover .d2 {
    opacity: 0.2; 
    margin-left:40px;   
}

jsfiddle link

答案 1 :(得分:-1)

是的,你可以

        func getFirstAndLastDateOfMonth(date: NSDate) -> (fistDateOfMonth: NSDate, lastDateOfMonth: NSDate) {

            let calendar = NSCalendar(calendarIdentifier: NSCalendarIdentifierGregorian)
            let calendarUnits = NSCalendarUnit.CalendarUnitYear | NSCalendarUnit.CalendarUnitMonth
            let dateComponents = calendar?.components(calendarUnits, fromDate: date)

            let fistDateOfMonth = self.returnedDateForMonth(dateComponents!.month, year: dateComponents!.year, day: 1)
            let lastDateOfMonth = self.returnedDateForMonth(dateComponents!.month + 1, year: dateComponents!.year, day: 0)

            println("fistDateOfMonth \(fistDateOfMonth)")
            println("lastDateOfMonth \(lastDateOfMonth)")

            return (fistDateOfMonth!,lastDateOfMonth!)
        }

       func returnedDateForMonth(month: NSInteger, year: NSInteger, day: NSInteger) -> NSDate? {
            var components = NSDateComponents()
            components.day = day
            components.month = month
            components.year = year

            let gregorian = NSCalendar(calendarIdentifier: NSCalendarIdentifierGregorian)

            return gregorian!.dateFromComponents(components)
        }