1

ナビゲーションバーを作成しようとしています。私が欲しいのは、ブロックアイテムにカーソルを合わせると背景が変わることです。私の問題は、ブロックがリンクよりも少し大きいことです。そのため、マウスをリンク領域の外に移動すると、クリックできません。これは私が作成した jsfiddle です。ホバーするときにリンクの背景色を変更して、視覚的な補助 http://jsfiddle.net/Tx8MK/3/を改善した ので、リンク ブロックをリスト ブロックに合わせるにはどうすればよいですか。ありがとうございました

#navBar li{
    float:left; 
    display:block;  
    text-align:center;  
    position:relative;  
    padding: 4px 10px 4px 10px;  
    margin-right:30px;  

    border:none; 
}

#navBar li:hover{
border: 1px solid #777777; 
border-bottom:none;
    padding: 3px 9px 4px 9px;  

    /* Background color and gradients */  

    background: #F4F4F4;  
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);  
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));  

    /* Rounded corners */  

    -moz-border-radius: 5px 5px 0px 0px;  
    -webkit-border-radius: 5px 5px 0px 0px;  
    border-radius: 5px 5px 0px 0px;  
}

 #navBar li a{
    font-family:Arial, Helvetica, sans-serif;  
    font-size:18px;   
    color: #EEEEEE;  
    display:block;  
    outline:0;  
    text-decoration:none;  
    text-shadow: 1px 1px 1px #000;  
    padding: 0 25px;

}
#navBar li a:hover{

    text-decoration: none;
    color:#000;  
    display:block; 
    padding: 0 25px;    
    background:#fff;

}
4

2 に答える 2