Question

我尝试创建一个元素列表。当鼠标越过其中一列时，将对列元素应用（缩放）转换。背景似乎可以强制实施此效果。

我使用带有浮点数的div，使用标题项上的:before伪元素创建背景。 :before伪元素具有position:absolute并附加到主容器。

在将transform: scale(1.25)应用于标题项之前，一切正常。应用此属性后，:before伪元素将附加到标头而不是容器。

这个小提琴显示了错误的例子：http://jsfiddle.net/Elendev/z3ho4xre/

只要您将鼠标放在其中一个表格的元素上，背景就会附加到错误的元素上。

我尝试将position属性强制为static，但它无效。

以下是演示HTML代码：

<div class="container">
    <div class="header">
        <div class="title"></div>
        <div class="col1">Col 1 header</div>
        <div class="col2">Col 2 header</div>
    </div>
    <div class="category">
        <h4>My category</h4>
        <div class="element col1">
            element 1
        </div>
        <div class="element col2">
            element 2
        </div>
    </div>
    <div class="category">
        <h4>My second category</h4>
        <div class="element col1">
            element 1
        </div>
        <div class="element col2">
            element 2
        </div>
    </div>
</div>

CSS：

.container {
    position: relative;
}

h4, .header .title {
    width: 150px;
    height: 30px;
    float: left;
    clear: left;
    margin: 0;
}

.col1, .col2 {
    float: left;
    width: 100px;
}

.col1-hover .col1, .col2-hover .col2 {
    transform: scale(1.25);
}

.header .col1:before, .header .col2:before {
    content: ' ';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    opacity: 0.4;
    background-color: red;
    transition: background-color 0.5s, transform 0.5s;
}

.header .col1:before {
    left: 150px;
}

.header .col2:before {
    left: 250px;
}

.col1-hover .header .col1:before, .col2-hover .header .col2:before {
    transform: scale(1.25);
    background-color: blue;
    border: 1px solid black;
}

.category:after {
    content: ' ';
    display: block;
    clear: both;
}

.category .col1, .category .col2 {
    position: relative;
    z-index: 1;
}

使其运作的JavaScript：

$(function() {
    $('.element').hover(function(event){
        var $element = $(event.target),
            containerClass;

        if($element.hasClass('col1')) {
            containerClass = 'col1-hover';
        } else {
            containerClass = 'col2-hover';
        }

        $('.container').addClass(containerClass);
    }, function(event){
        $('.container').removeClass('col1-hover col2-hover');
    });

});

使用css变换定位绝对/相对变化

0 个答案: