1

我正在尝试获得一个固定的 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 个空格才能发布代码..

4

1 回答 1

0

我过去做过类似的事情。我想在页面的一侧有一个导航选项卡，并让它在扩展时始终显示在页面上其他任何内容的顶部。这很容易通过使用position: fixed和z-index: 1000的混合来完成，同时还将这个 div 锚定到 body 本身。

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

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

我希望这有帮助。

于 2013-01-18T21:43:42.063 回答