Question

我需要创建一个与此图像 enter image description here

相同的菜单

我的问题是悬停状态，我需要更改两侧的垂直图像。到目前为止，我已经到了这一点：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 hack。我希望你不必使用低于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;
}

<强> Fiddle

Answer 4

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

background-image：url（...），url（...）;

background-position：left，right;

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

4 个答案: