div浮动div与悬停效果

我想获得一个100％的div是固定的（以便它保持在页面的顶部，当你滚动）滚动多个小div与悬停的影响。我似乎无法弄清楚如何将导航悬停在小格子上，它总是落后于它。我相信问题是CSS的位置标签，但我不知所措...请帮助！div浮动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个空格每行手动张贴代码..

来源

2013-01-18 James Kirl

如果您提供一个小型自包含示例，其中包含足够的代码来演示问题，而无需任何额外的解决方案，您将得到更好的答案。将此代码发布到问题中或JSFiddle（jsfiddle.net）中。这样做可能需要很多工作，但它是解决问题的关键部分。 – KatieK

您是否熟悉z-index？ – Jason

'z-index：9999;'是你的朋友:) – 2013-01-18 21:30:29

-1

心中已经在过去做过类似的事情。我想在页面的侧面有一个导航选项卡，并且它总是在页面展开时显示在页面上。这很容易通过使用位置：固定以及z-index：1000的混合物而容易地实现，同时也将该div固定到身体本身。

W3C对的位置和z索引主题的好文章：

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

我希望这有助于。

来源

2013-01-18 21:43:42 LNendza

非常感谢大家。我不知道z-index存在，但它完美地解决了这个问题！ –

是的，z-index是一个强大的工具，非常适合这样的问题。当你想要做一个HTML对话框（而不是一个普通的旧JavaScript警报）时，它也会派上用场。通过这种方式，您知道要显示用户的任何重要信息始终处于最高位置。 – LNendza

div浮动div与悬停效果

回答

相关问题