0

我一直在测试用 CSS3 悬停的 Div .. 我对我所有的编码都做了一个小提琴，我一直在使用 SASS 来编译它（因为它节省了我编写代码的行和行），但我已经粘贴了SASS 这里我也一直在使用编译器。

我不确定jQuery是否是要走的路，如果你将鼠标悬停在顶部的第一个div上，它会显示来自'.caption h4[rel="grid-title"]'的H4元素，如果你悬停它从底部显示“.cross”元素，我想将鼠标悬停在 div 本身上，然后让它们一起应用。

/* ----- TYPOGRAPHY ----- */
%typography {
    font-family: $main-font;
    @include font-size(12);
    color: $main-fontcolour;
}

body {
    @extend %typography;
}
/* ----- PAGE ELEMENTS ----- */

.maincontainer {
    @include container;
}

section .centre {
    @include row;
}

.spacer {
    @include spacer;
}

// Extenders
%photoc {
    padding: 20px;
    font-weight: bold;
    text-align: center;
}
// Wraps Around Photo
.photo-wrapper {
    margin: 0;
    padding: 0;
    @include relative;
    max-height: 320px;
    overflow: hidden;
    float: left;
    @include columns (4);

            & .caption {
                background-color: rgba(177, 177, 177, 0);
                height: 0;
                min-height: 100%;
                min-width: 100%;
                @include notl;
                background-position: 50% -100%;
                background-repeat: no-repeat;
                @extend %photoc;
                @include transition(all, 300ms, ease-in-out);
                @include absolute;

                &:hover {
                    background-color: rgba(177, 177, 177, 0.3);
                    background-position: 50% 50%;
                    background-repeat: no-repeat;

                       img {
                           max-height: 100%;
                           @include transition(all, 300ms, ease-in-out);
                           }
                   }

        }
}

.caption .cross {
    @include absolute;
    @include notl;
    @include minper;
    background-image: url("http://suitabledesign.co/experiment/img/cross.png");
    background-repeat: no-repeat;
    background-position: center -200%;
        &:hover {
            background-position: center center;
            @include transition (all, .25s, ease-in-out)
        }
}

.caption h4[rel="grid-title"] {
    color: rgba(255, 255, 255, 1);
    @include font-size(14);
    @include absolute;
    @include notl;
    @include minper;
    @include translateY(-100px);

        &:hover {
            @include translateY(0px);
            @include transition (all, .25s, ease-in-out);
            top: 0;
    }
}

我会很感激我能得到的任何帮助:)

编辑：对不起，我忘记了小提琴链接.. http://jsfiddle.net/hounder/7gL8U/1/

4

0 回答 0