CSS懸停僅在按鈕的上半部分起作用

Question

我真的很喜歡這支頭發。 我沒有專業或定期的網頁； 我真的很沮喪

您可以在這里轉到我的進行中頁面：

http://damienivan.com/wip/042/

如果將鼠標懸停在“功能突出”下方的按鈕之一上，則僅當光標位於按鈕的上半部分上方時，才會顯示懸停狀態和“鏈接指”。

CSS是：

    .work_button    
        {
        width:              174px;
        height:             58px;
        float:              left;
        background:         #3FC0E9;
        border-right:       4px solid #30A9D0;
        }

    .work_button:hover
        {
        background:         #FFF;
        color:              #30A9D0;
        }

HTML是：

<a href="demo_reel.html" target="video_player">
    <div class="work_button">
        <h2>demo reel</h2>
    </div>
</a>

完整的CSS文件位於：

http://damienivan.com/wip/stylesheets/main.css

提前致謝！ 我真的被困在這里。

-達米恩

Answer 1

嘗試增加work_wrapper的高度

嘗試這個：

#work_wrapper {
    height: 125px;
    padding-top: 14px;
    position: relative;
    width: 890px;
}

或者您也可以嘗試

#footer_wrapper { clear: both; }

Answer 2

問題是您的#work_wrapper div的高度固定（不好的主意）。 刪除該高度，而是將其設置為overflow: hidden以便環繞您的按鈕：

#work_wrapper {
width: 890px;
height: 100px;    /*  REMOVE THIS  */
padding-top: 14px;
position: relative;
overflow: hidden;  /*  ADD THIS  */
}

另外，您實際上不應該在鏈接內使用div和h2 。 將它們剝離，然后執行以下操作：

HTML：

<a href="demo_reel.html" target="video_player">demo reel</a>

CSS：

#work_button_wrapper a {
  display: block;
  float: left;
  width: 174px;
  text-align: center;
  line-height: 58px;
  background: #3FC0E9;
  font-size: 1.25em;
}

#work_button_wrapper a:hover {
  background: white;
  color: #3FC0E9;
}

Answer 3

此css語句可以幫助您：

 #footer_wrapper { clear: both; }

順便說一句：將div嵌套到錨標記中無效。

Answer 4

使用Google Chrome或Mozilla Firefox調試您的網頁。 兩種瀏覽器都有使用Webdeveloper工具的選項，這將使您更好地可視化CSS。 這將幫助您實際看到正在發生的情況，在這種情況下，有一個cssobject會阻塞按鈕的一半。 在Firefox中，此功能的一大優點是它具有3D視圖選項。 一開始看起來很怪異，但是在嘗試查看CSS發生的事情時確實很有幫助。

Answer 5

問題是頁面的頁腳。 在按鈕上方。

給按鈕一個z索引，它將很好用！

您總是可以將頁腳的z-index:-1;

按鈕將顯示在頂部，並在整個按鈕上懸停

Answer 6

您在混合內聯和塊元素。 檢查H2，您會看到可點擊元素在此處結束。

以下是重構的HTML：

<div id="work_button_wrapper">

    <a href="demo_reel.html" class="work_button" target="video_player">            
            demo reel           
    </a>

    <a href="hp.html" class="work_button" target="video_player">          
            hp            
    </a>

    <a href="free_world.html" class="work_button" target="video_player">    
            free world          
    </a>

    <a class="work_button" href="dabo.html" target="video_player">           
            dabo            
    </a>

    <a class="work_button" href="sugar_skull.html" target="video_player" class="work_button work_button_last">           
            sugar skull          
    </a>

</div>

CSS：

body {
font: 17px/19px Helvetica, sans-serif;
color: #FFF;
}

#work_button_wrapper
    {
    width:              890px;
    float:              left;
    padding-top:        9px;
    overflow:hidden;
    }

.work_button    
    {
    width:              174px;
    float:              left;
    overflow: hidden;
    background:         #3FC0E9;
    border-right:       4px solid #30A9D0;
        color: #fff;
        text-decoration: none;
        display: block;
        font-size: 24px;
        font-weight: normal;
        letter-spacing: -1.5px;
        text-align: center;
            padding: 20px 10px;
}

.work_button:hover
    {
    background:         #FFF;
    color:              #30A9D0;
    }

.work_button_last
    {
    width:              178px;
    border-right:       0px solid #30A9D0;;
    }   

http://jsfiddle.net/brutusmaximus/ZPunN/

Answer 7

將a tag內div並添加寬度和高度標簽（你們已經給予height and width為它覆蓋標簽的DIV因此在給予同樣的沒有錯height和width的a tag ）

#work_button_wrapper
        {
        width:              890px;
        float:              left;
        padding-top:        9px;
        /* border:              2px solid #FFF; */
        }

    .work_button    
        {
        width:              174px;
        height:             58px;
        float:              left;
        background:         #3FC0E9;
        border-right:       4px solid #30A9D0;
  text-align:center
        }
    .work_button a
        {
        text-decoration:    none;
        font-size:          15px;
        color:              #FFF;
        height:58px;
        width:174px
}
h2{
  height:100%; width:100%
}
    .work_button a:hover
        {
        background:         #FFF;
        color:              #30A9D0;
        }

    .work_button_last
        {
        width:              178px;
        border-right:       0px solid #30A9D0;;
        }   


#work_button_wrapper a:hover
        {
        /* background:          #3FC0E9; */
        background:         #FFF;
        color:              #30A9D0;
        }
.work_button:hover
        {
        background:         #FFF;
        color:              #30A9D0;
        }

演示

Answer 8

我有同樣的問題。 對我來說，父div的位置是：固定的，並且在按鈕上方不可見，這很難確定。