Div悬浮在Div上浮动效果

时间:2013-01-18 21:21:29

标签: css css3 html hover

我正在尝试获得一个固定的100%div(以便在滚动时它保持在页面的顶部)以滚动多个具有悬停效果的小div。我似乎无法弄清楚如何让导航悬停在小div上,它总是落后于它。我相信问题是css位置标签,但我不知所措......请帮助!

以下是带有悬停影响的小div的代码..我拿出顶部导航div,因为它不适合我......

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" href="styles.css"  />
</head>
<body>
    <div class="main">
        <div class="view view-fifth">
            <img src="1.png" />
            <div class="mask">
                <h2>Android 4.0</h2>
                <a href="#" class="info">$9.99</a>
                <p>
                    Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                </p>        
            </div>
        </div>
    </div>
    <div class="main">
        <div class="view view-fifth">
            <img src="1.png" />
            <div class="mask">
                <h2>Android 4.0</h2>
                <a href="#" class="info">$9.99</a>
                <p>
                    Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                </p>        
            </div>
        </div>
    </div>
    <div class="main">
        <div class="view view-fifth">
            <img src="1.png" />
            <div class="mask">
                <h2>Android 4.0</h2>
                <a href="#" class="info">$9.99</a>
                <p>
                    Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                </p>        
            </div>
        </div>
    </div>
    <div class="main">
        <div class="view view-fifth">
            <img src="1.png" />
            <div class="mask">
                <h2>Android 4.0</h2>
                <a href="#" class="info">$9.99</a>
                <p>
                    Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                </p>
            </div>
        </div>
   </div>
    <div class="main">
        <div class="view view-fifth">
            <img src="1.png" />
            <div class="mask">
                <h2>Android 4.0</h2>
                <a href="#" class="info">$9.99</a>
                <p>
                    Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                </p>        
            </div>
        </div>
    </div>
    <div class="main">
        <div class="view view-fifth">
            <img src="1.png" />
            <div class="mask">
                <h2>Android 4.0</h2>
                <a href="#" class="info">$9.99</a>
                <p>
                    Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                </p>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="view view-fifth">
            <img src="1.png" />
            <div class="mask">
                <h2>Android 4.0</h2>
                <a href="#" class="info">$9.99</a>
                <p>
                    Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                </p>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="view view-fifth">
            <img src="1.png" />
            <div class="mask">
                <h2>Android 4.0</h2>
                <a href="#" class="info">$9.99</a>
                <p>
                    Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                </p>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="view view-fifth">
            <img src="1.png" />
            <div class="mask">
                <h2>Android 4.0</h2>
                <a href="#" class="info">$9.99</a>
                <p>
                    Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                </p>        
            </div>
        </div>
    </div>
    <div class="main">
        <div class="view view-fifth">
            <img src="1.png" />
            <div class="mask">
                <h2>Android 4.0</h2>
                <a href="#" class="info">$9.99</a>
                <p>
                    Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                </p>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="view view-fifth">
            <img src="1.png" />
            <div class="mask">
                <h2>Android 4.0</h2>
                <a href="#" class="info">$9.99</a>
                <p>
                    Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                </p>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="view view-fifth">
            <img src="1.png" />
            <div class="mask">
                <h2>Android 4.0</h2>
                <a href="#" class="info">$9.99</a>
                <p>
                    Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                </p>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="view view-fifth">
            <img src="1.png" />
            <div class="mask">
                <h2>Android 4.0</h2>
                <a href="#" class="info">$9.99</a>
                <p>
                    Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                </p>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="view view-fifth">
            <img src="1.png" />
            <div class="mask">
                <h2>Android 4.0</h2>
                <a href="#" class="info">$9.99</a>
                <p>
                    Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                </p>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="view view-fifth">
            <img src="1.png" />
            <div class="mask">
                <h2>Android 4.0</h2>
                <a href="#" class="info">$9.99</a>
                <p>
                    Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                </p>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="view view-fifth">
            <img src="1.png" />
            <div class="mask">
                <h2>Android 4.0</h2>
                <a href="#" class="info">$9.99</a>
                <p>
                    Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                </p>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="view view-fifth">
            <img src="1.png" />
            <div class="mask">
                <h2>Android 4.0</h2>
                <a href="#" class="info">$9.99</a>
                <p>
                    Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You     Buy Now! You Buy Now! You Buy Now! You Buy Now!
                </p>
            </div>
        </div>
    </div>
</body>
</html>

和CSS

.view {
    width: 180px;
    height: 160px;
    margin: 5px;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    /*
    -webkit-box-shadow: 1px 1px 2px #e6e6e6;
    -moz-box-shadow: 1px 1px 2px #e6e6e6;
    box-shadow: 1px 1px 2px #e6e6e6;
    */
    cursor: default;
    background: #fff url() no-repeat center center;
    /*
    border-top: 2px solid #2e84c0;
    border-left: 2px solid #2e84c0;
    border-right: 2px solid #efefef;
    border-bottom: 4px solid #2e84c0;
    */
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
body {
    background-image:url    (../img/blue_line_background.jpg);
    min-width:1080px;
}
.view .mask,.view .content {
    width: 180px;
    height: 160px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.view img {
    display: block;
    position: relative;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 15px;
    padding: 2px;
    background: rgba(0, 0, 0, 0.8);
    margin: 0 0 0 0;
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    /*padding: 10px 20px 20px;*/
    text-align: center;
}
.view a.info {
    display: inline-block;
    text-decoration:none;
    font-weight:bold;
    padding: 5px;
    background:;
    color: #359ce1;
    text-transform: uppercase;
    /* 
    -webkit-box-shadow: 0 0 1px #000;
    -moz-box-shadow: 0 0 1px #000;
    box-shadow: 0 0 1px #000;
    */
}
.view a.info: hover {
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;
}
.view-fifth img {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
} 
.view-fifth .mask {
    background-color: #c3c3c3;
    -webkit-transform: translateX(-300px);
    -moz-transform: translateX(-300px);
    -o-transform: translateX(-300px);
    -ms-transform: translateX(-300px);
    transform: translateX(-300px);
    -ms-filter: "progid:     DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
} 
.view-fifth h2 {
    background: rgba(255, 255, 255, 0.5);
    color: #000;
    -webkit-box-shadow: 0px 1px 3px rgba(159, 141,     140, 0.5);
    -moz-box-shadow: 0px 1px 3px rgba(159, 141, 140,     0.5);
    box-shadow: 0px 1px 3px rgba(159, 141, 140,     0.5);   
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.view-fifth p {
    -ms-filter: "progid:     DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    color: #000;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
.view-fifth:hover .mask {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.view-fifth:hover img {
    -webkit-transform: translateX(300px);
    -moz-transform: translateX(300px);
    -o-transform: translateX(300px);
    -ms-transform: translateX(300px);
    transform: translateX(300px);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.view-fifth:hover p {
    -ms-filter: "progid:         DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

由于某种原因..代码输入按钮永远不适合我..我必须每行输入4个空格手动发布代码..

1 个答案:

答案 0 :(得分:-1)

我过去做过类似的事情。我想在页面的侧面有一个导航选项卡,并且它总是在展开时显示在页面上的其他内容之上。这可以通过使用位置:固定 z-index:1000 的混合物轻松实现,同时还将此div固定到身体本身。

W3C有一篇关于位置和z-index主题的好文章:

http://www.w3schools.com/cssref/pr_class_position.asp http://www.w3schools.com/cssref/pr_pos_z-index.asp

我希望这会有所帮助。