Question

我的网站顶部有一个导航栏，一个简单的HTML无序列表：

<div class="navitemcontainer">
            <ul class="navlistul">
                <li><a href="index.html">Contact</a></li>
                <li><a href="index.html">Services</a></li>
                <li><a href="index.html">Home</a></li>
            </ul>
        </div>

在这背后我有一些基本的CSS格式：

.navitemcontainer
{
padding-top: 40px;
padding-right: 10px;
}

.navlistul
{
list-style-type: none;
}

.navitemcontainer li
{
float: right;
opacity: 0.5;

}

.navitemcontainer li~li
{
border-right: 3px ridge #FFF;
}

.navitemcontainer li a
{
text-decoration: none;
color: #FFF;
display: block;
text-align: center;
padding-left: 20px;
padding-right: 20px;
font-size: 20px;

font-family: 'Allerta Stencil';
}

.navitemcontainer li:active
{
margin-top: 2px;
}

我还有一个Javascript函数来改变mouseenter / mouseleave上链接的不透明度：

function opaquelinkchange()
{
$(".logo, .navlistul li").on
(
    {
        mouseenter : function()
        {
            $(this).stop().fadeTo(250, 1);
        },
        mouseleave : function()
        {
            $(this).stop().fadeTo(250, 0.5);
        }
    }
)
}

我遇到的问题是当鼠标进入导航链接时，它也会点亮（设置不透明度）下面的CSS属性：

.navitemcontainer li~li
{
border-right: 3px ridge #FFF;
}

我知道这是正确的，并且这里没有错误，但我希望右边的属性保持不透明，并且不会在mouseenter上亮起。

有没有办法从JavaScript代码中排除这个CSS属性？

我是HTML，CSS和JS的新手，所以如果这是一个愚蠢的问题和代码格式，请原谅。

感谢您的帮助。

Ĵ

从jQuery中排除CSS属性

0 个答案: