1. 首頁
  2. 問答
  3. 自定義懸停效果位置問題

自定義懸停效果位置問題

2016-11-03 23 views
0

我試圖從屏幕的水平中心放置一個按鈕10px。這是按鈕代碼。該按鈕使用一些奇特的懸停效果，不會隨按鈕移動。我怎樣才能把按鈕10px離開屏幕的水平中心？自定義懸停效果位置問題

body { 
 
    background-color: green; 
 
} 
 
.button-2 { 
 
    width: 140px; 
 
    height: 50px; 
 
    border: 2px solid white; 
 
    float: left; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    overflow: hidden; 
 
    margin: 0 0 40px 50px; 
 
} 
 
.button-2 a { 
 
    font-family: arial; 
 
    font-size: 16px; 
 
    color: white; 
 
    text-decoration: none; 
 
    line-height: 50px; 
 
    transition: all .5s ease; 
 
    z-index: 2; 
 
    position: relative; 
 
} 
 
.eff-2 { 
 
    width: 140px; 
 
    height: 50px; 
 
    top: -50px; 
 
    background: white; 
 
    position: absolute; 
 
    transition: all .5s ease; 
 
    z-index: 1; 
 
} 
 
.button-2:hover .eff-2 { 
 
    top: 0; 
 
} 
 
.button-2:hover a { 
 
    color: #666; 
 
} 
 
.watch-video-position {}
<div class="watch-video-position"> 
 
    <div class="button-2 watch-video-position"> 
 
    <div class="eff-2 watch-video-position"></div> 
 
    <a href="#"> CLICK ME </a> 
 
    </div> 
 
</div>

來源

2016-11-03 sanjihan

+0

當你說 「10px的關閉屏幕的水平中心」，你的意思是你想要的按鈕的中心將10px的到屏幕中央的左/右，或按鈕的左邊緣，或按鈕的右邊緣？請提供更多詳細信息，以便我們瞭解您嘗試實現的確切行爲。 – Serlite

+0

感謝隊友，你可以問我需要的任何更多信息，以及它需要爲你工作的方式。 –

+1

謝謝，我很好。 – sanjihan

回答

1

您需要使用這樣的：

.top { 
    position: relative; 
} 
.top .button-2 { 
    position: absolute; 
    left: 50%; 
    margin-left: -70px; 
}

確保你的獨特類top添加到第一<div>，並使用它的位置。您還可以在.top上使用邊距和填充。

body { 
 
    background-color: green; 
 
} 
 
.button-2 { 
 
    width: 140px; 
 
    height: 50px; 
 
    border: 2px solid white; 
 
    float: left; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    overflow: hidden; 
 
    margin: 0 0 40px 50px; 
 
} 
 
.button-2 a { 
 
    font-family: arial; 
 
    font-size: 16px; 
 
    color: white; 
 
    text-decoration: none; 
 
    line-height: 50px; 
 
    transition: all .5s ease; 
 
    z-index: 2; 
 
    position: relative; 
 
} 
 
.eff-2 { 
 
    width: 140px; 
 
    height: 50px; 
 
    top: -50px; 
 
    background: white; 
 
    position: absolute; 
 
    transition: all .5s ease; 
 
    z-index: 1; 
 
} 
 
.button-2:hover .eff-2 { 
 
    top: 0; 
 
} 
 
.button-2:hover a { 
 
    color: #666; 
 
} 
 
.top { 
 
    position: relative; 
 
    padding-top: 25px; 
 
} 
 
.top .button-2 { 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -70px; 
 
}
<div class="top watch-video-position"> 
 
    <div class="button-2 watch-video-position"> 
 
    <div class="eff-2 watch-video-position"></div> 
 
    <a href="#"> CLICK ME </a> 
 
    </div> 
 
</div>

來源

2016-11-03 16:07:19

1

嘗試定心其父及其父內它移：

body { 
 
    background-color: green; 
 
    text-align: center; 
 
} 
 
.outer { 
 
    width: 200px; 
 
    margin: auto; 
 
    background-color: blue; 
 
} 
 
.button-2 { 
 
    width: 140px; 
 
    height: 50px; 
 
    border: 2px solid white; 
 
    cursor: pointer; 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    overflow: hidden; 
 
    margin: 0 0 40px 50px; 
 
} 
 
.button-2 a { 
 
    font-family: arial; 
 
    font-size: 16px; 
 
    color: white; 
 
    text-decoration: none; 
 
    line-height: 50px; 
 
    transition: all .5s ease; 
 
    z-index: 2; 
 
    position: relative; 
 
} 
 
.eff-2 { 
 
    width: 140px; 
 
    height: 50px; 
 
    top: -50px; 
 
    background: white; 
 
    position: absolute; 
 
    transition: all .5s ease; 
 
    z-index: 1; 
 
} 
 
.button-2:hover .eff-2 { 
 
    top: 0; 
 
} 
 
.button-2:hover a { 
 
    color: #666; 
 
} 
 
.watch-video-position {}
<div class="watch-video-position outer"> 
 
    <div class="button-2 watch-video-position"> 
 
    <div class="eff-2 watch-video-position"></div> 
 
    <a href="#"> CLICK ME </a> 
 
    </div> 
 
</div>

來源

2016-11-03 16:08:46 arhak

+0

不起作用。你檢查了嗎？ –

+0

你沒有看到一個藍色的div居中，然後「Click me」div移向右邊？ – arhak

+0

是的，爲什麼藍色格子進來了？我說的是這個。 –

1

嘗試寬度90％div.button-2和設定邊界的和填充錨定。

body { 
 
    background-color: green; 
 
} 
 
.button-2 { 
 
    width: 90%; 
 
    height: 50px;  
 
    float: left; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    overflow: hidden; 
 
    margin: 0 0 40px 50px; 
 
} 
 
.button-2 a { 
 
    font-family: arial; 
 
    font-size: 16px; 
 
    color: white; 
 
    text-decoration: none; 
 
    line-height: 50px; 
 
    transition: all .5s ease; 
 
    z-index: 2; 
 
    position: relative; 
 
    border: 2px solid white; 
 
    padding:15px; 
 
} 
 
.eff-2 { 
 
    width: 140px; 
 
    height: 50px; 
 
    top: -50px; 
 
    background: white; 
 
    position: absolute; 
 
    transition: all .5s ease; 
 
    z-index: 1; 
 
} 
 
.button-2:hover .eff-2 { 
 
    top: 0; 
 
} 
 
.button-2:hover a { 
 
    color: #666; 
 
} 
 
.top { 
 
    position: relative; 
 
    padding-top: 25px; 
 
} 
 
.top .button-2 { 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -70px; 
 
}
<div class="top watch-video-position"> 
 
    <div class="button-2 watch-video-position"> 
 
    <div class="eff-2 watch-video-position"></div> 
 
    <a href="#"> CLICK ME </a> 
 
    </div> 
 
</div>

來源

2016-11-03 16:37:33

2 
I have made some changes in the css to class button-2. 
.button-2 { 
     float: none; 
     margin: 0 auto; 
     top: 10px; 
    } 


body { 
 
     background-color: green; 
 
    } 
 
    .button-2 { 
 
     border: 2px solid white; 
 
     box-sizing: border-box; 
 
     cursor: pointer; 
 
     float: none; 
 
     height: 50px; 
 
     margin: 0 auto; 
 
     overflow: hidden; 
 
     position: relative; 
 
     text-align: center; 
 
     top: 10px; 
 
     width: 140px; 
 
    } 
 
    .button-2 a { 
 
     font-family: arial; 
 
     font-size: 16px; 
 
     color: white; 
 
     text-decoration: none; 
 
     line-height: 50px; 
 
     transition: all .5s ease; 
 
     z-index: 2; 
 
     position: relative; 
 
    } 
 
    .eff-2 { 
 
     width: 140px; 
 
     height: 50px; 
 
     top: -50px; 
 
     background: white; 
 
     position: absolute; 
 
     transition: all .5s ease; 
 
     z-index: 1; 
 
    } 
 
    .button-2:hover .eff-2 { 
 
     top: 0; 
 
    } 
 
    .button-2:hover a { 
 
     color: #666; 
 
    } 
 
    .watch-video-position {}
<div class="watch-video-position"> 
 
     <div class="button-2 watch-video-position"> 
 
     <div class="eff-2 watch-video-position"></div> 
 
     <a href="#"> CLICK ME </a> 
 
     </div> 
 
    </div>

來源

2016-11-03 18:26:04

相關問題

 相關問題