html - 导航菜单上的悬停效果 - 边框问题

Question

我需要创建一个与此图像相同的菜单

我的问题是悬停状态，我需要更改两侧的垂直图像。到目前为止，我已经到了这一点：http: //jsfiddle.net/cgEab/

如何在悬停状态下同时更改左右图像？

CSS的代码是

#topmenu{
    float: right;
    position: relative;    
}
ul#topnav {
    right: 0px;
    margin: 0;
    padding: 0; 
    list-style: none;   
    font-size: 1em;    
    background-color: #ccc;
}
ul#topnav li {
    float: left;
    margin: 0; padding: 0;
}
ul#topnav li a {
    padding: 10px 22px;
    display: block;
    color: #777777;
    text-decoration: none;
    background-image: url('http://s11.postimg.org/az4oag1in/menu_bar_vertical.jpg');
    background-position: right;
    background-repeat: no-repeat;
    display: block; 
}
ul#topnav li a.lastitem {
    background-image:none;    
}
ul#topnav li a:hover {
    color: red;
    background-image: url('http://s11.postimg.org/xch0azru7/menu_bar_vertical_hover.jpg');    
}

和html

<link href='http://fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>
<div id="topmenu">
<ul id="topnav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">SERVICES</a></li>
    <li><a href="#">CUSTOMERS</a></li>
    <li><a href="#">ABOUT US</a></li>
    <li><a class="lastitem" href="#">CONTACT</a></li>
</ul>   

Answer 1

我将边框图像更改为两侧加倍并减去边距以校正位置。

http://jsfiddle.net/Q3pQx/

ul#topnav li a {
    margin-left:-2px; <-- FIX
    padding: 10px 22px;
    display: block;
    color: #777777;
    text-decoration: none;
    background-image: url('http://s11.postimg.org/az4oag1in/menu_bar_vertical.jpg');
    background-position: right;
    background-repeat: no-repeat;
    display: block; /* make the link background clickable */
}

ul#topnav li a:hover {
    color: red;
    background: url('http://s11.postimg.org/xch0azru7/menu_bar_vertical_hover.jpg'), url('http://s11.postimg.org/xch0azru7/menu_bar_vertical_hover.jpg'); <-- FIX
    background-position: left top, right top; <-- FIX
    background-repeat: no-repeat, no-repeat; <-- FIX
}

编辑了小提琴做了一些微调http://jsfiddle.net/LhFkf/

Answer 2

我可以试试这个吗

http://jsfiddle.net/cgEab/7/

CSS

 #topmenu{
    float: right;
    position: relative;    
}
ul#topnav {
   /* position: absolute;*/    
    right: 0px;
    margin: 0;
    padding: 0; 
    /*width: 640px;*/
    list-style: none;   
    font-size: 1em;    
    background-color: #ccc;

}
ul#topnav li {
    float: left;
    margin: 0; padding: 0;
    /*border-right: 1px solid #555;*/
}
ul#topnav li a {
    padding: 10px 22px;
    display: block;
    margin-left:-2px;
    color: #777777;
    text-decoration: none;
    background-image: url('http://s11.postimg.org/az4oag1in/menu_bar_vertical.jpg');
    background-position: right;
    background-repeat: no-repeat;
    display: block; /* make the link background clickable */
}
ul#topnav li a.lastitem {
    background-image:none;    
}
ul#topnav li a:hover {
    color: red;


    background: url('http://s11.postimg.org/xch0azru7/menu_bar_vertical_hover.jpg'), url('http://s11.postimg.org/xch0azru7/menu_bar_vertical_hover.jpg');
background-position: left top, right top;
background-repeat: no-repeat, no-repeat;


    }

Answer 3

我已经把图像放到了li, 在它出现在li a.
这是一个 css3 黑客。我希望你不必使用低于 8 的 IE。

#topmenu{
    float: right;
    position: relative;    
}
ul#topnav {
   /* position: absolute;*/    
    right: 0px;
    margin: 0;
    padding: 0; 
    /*width: 640px;*/
    list-style: none;   
    font-size: 1em;    
    background-color: #ccc;

}
ul#topnav li {
    float: left;
    margin: 0; padding: 0;
    background-image: url('http://s11.postimg.org/az4oag1in/menu_bar_vertical.jpg');
    background-position: left;
    background-repeat: no-repeat;  
}

ul#topnav li:hover,
ul#topnav li:hover + li {
    background-image: url('http://s11.postimg.org/xch0azru7/menu_bar_vertical_hover.jpg')
    /*border-right: 1px solid #555;*/
}
ul#topnav li a {
    padding: 10px 22px;
    display: block;
    color: #777777;
    text-decoration: none;
    /*background-image: url('http://s11.postimg.org/az4oag1in/menu_bar_vertical.jpg');
    background-position: left;
    background-repeat: no-repeat;*/
    display: block; /* make the link background clickable */
}
ul#topnav li:first-child {
    background-image:none;    
}
ul#topnav li a:hover{
    color: red;
}

小提琴

Answer 4

'background-image' 可以拍摄多张图片。所以你可以尝试这样的事情：

背景图像：url（...），url（...）；

背景位置：左，右；