Question

我尝试实现以下输出：

normal view

after hover this will show

我希望用HTML和CSS实现这一目标。我不想使用CSS3（因为我的客户不希望我这样做！）。我尝试以下代码：

HTML：

<div class="menu">
    <ul>
        <li><a href="">registration</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Sch's direc</a></li>
        <li><a href="">faculty &amp; staff</a></li>
        <li><a href="">Campuses</a></li>
        <li><a href="">History</a></li>            
        <li><a href="" >Mission</a><img src="images/right_menu.png" /></li>
        <li style="margin:0;padding:0;"><img src="images/left_menu.png" /></li>
    </ul>
</div>

CSS：

.menu ul{
    list-style:none;

}

.menu li{
    float:right;
    background:url('images/menuBGrepX.png') repeat-x ;
    margin-right:10px;
    text-transform:uppercase;
}

.menu a{
    display:block;
    text-decoration:none;
    color:#fff;
    padding:5px 2px;
    float:left;
}



.menu li.selected{
    background:#A07E4E;

}

.menu li:hover{
    background:#A07E4E;
    color:#313131;

}

正如您所期望的那样li的背景颜色正在改变，当有人将鼠标悬停在它上面但我使用的左右图像给出圆润的边框感时，它仍保持相同。请帮我。您可以在此处查看临时工作：http://www.examplecode.info/enam/pleasehelp/。提前致谢。

Answer 1

使用jQuery圆角插件进行跨浏览器圆角。

http://jquery.malsup.com/corner/

所有浏览器都支持IE，包括IE。它使用嵌套的div（没有图像）在IE中绘制角落。它还支持浏览器中的原生边界半径舍入（Opera 10.5 +，Firefox，Safari和Chrome）。因此，在这些浏览器中，插件只是设置了一个css属性。

以下是如何使用

您需要在</body>之前包含jQuery和Corner js脚本。然后编写你的jQuery，如$（'div，p'）。corner（'10px'）;放在''之前。所以你的HTML看起来像下面的代码。在这里，我为所有div和p标签制作圆角。如果您想针对特定的ID或类进行操作，那么您可以执行$('#myid').corner();

之类的操作

<body>
    <div class="x"></div>
    <p class="y"></p>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
<script>$('div, p').corner();</script>
</body>

检查http://jsfiddle.net/VLPpk/1

处的工作示例

Answer 2

我很想知道为什么你的客户要求你不要使用CSS3圆角？这听起来像是一个非常短视的请求。唯一可能的原因是因为某些浏览器（IE6 / 7/8）不支持它。

在所有其他浏览器中，CSS border-radius 到目前为止是圆角的最佳解决方案。所有其他解决方案都存在重大问这就是为什么CSS3解决方案突然非常受欢迎的原因，这是因为它解决了人们之前为之奋斗的所有问题。

有许多解决方案允许CSS3 border-radius被支持它的浏览器使用，并回退到IE6 / 7/8的Javascript。我会认真推荐其中一种解决方案。我所知道的最好的是CSS3Pie，但还有很多其他的。

Answer 3

是否允许使用JavaScript？
给所有元素一个id，并在链接上添加一个onMouseOver（）和onMouseOut（）事件，在每个边框上调用getElementById（）并用src =“images / newimage.jpg”更改它们。

Answer 4

在hss list元素的css中，您也必须更改图像。例如：

.menu li:hover {
   background:url('images/menuBGrepX_hover.png') repeat-x ;
   color:#313131;
}

您无法仅使用CSS更改图像的颜色，您必须完全更改图像。

没有CSS3的CSS中的圆角菜单项！

4 个答案:

http://jquery.malsup.com/corner/

以下是如何使用

检查http://jsfiddle.net/VLPpk/1