jQuery .mouseover和.css在IE中有效，但在Safari或Chrome中不起作用

问题描述

| 当您在IE中进行鼠标悬停时，css，mouSEOver和mouSEOut可以正常工作-并且它们可以正常运行轮播。但是，在Chrome或Safari中，元素根本没有设置样式，即使它们位于anchro标记中，也无法单击。悬停不适用于Safari或Chrome。基本上，文本的行为就好像是静态文本一样。 **但是，仅适用于Safari和Chrome中标签的样式是text-decoration：none调用。 CSS AND轮播触发器应可在所有3种浏览器中使用。有人知道为什么吗？ ;） 的CSS

#next,#nextR,#prevIoUs,#prevIoUsR
{
    text-decoration: none;
}
.prevNextLatestMinus,.prevNextLatestMinus2,.prevNextLatestPlus,.prevNextLatestPlus2,.prevNextFeatureMinus2,.prevNextFeatureMinus,.prevNextFeaturePlus2,.prevNextFeaturePlus,.leftPanelBody,.rightPanelBody
{    
    cursor: pointer;
}

.prevNextLatestMinus:hover,.prevNextLatestPlus2:hover,.prevNextFeatureMinus2:hover,.prevNextFeaturePlus2:hover 
{
    color: #a43802;
}

.prevNextLatestMinus2:hover,.prevNextLatestPlus:hover,.prevNextFeatureMinus:hover,.prevNextFeaturePlus:hover
{
    color: White;
}

的HTML

<div class=\"leftPanel\">
    <div class=\"thelatestLabel\"></div>
    <div class=\"prevNextLatest\">
        <a href=\"javascript:return false;\" name=\"prevIoUs\" id=\"prevIoUs\" value=\"PrevIoUs\"><div class=\"prevNextLatestMinus2\">-</div><div class=\"prevNextLatestMinus\">Prev</div></a>&nbsp;&nbsp;
        <a href=\"javascript:return false;\" name=\"next\" id=\"next\" value=\"Next\"><div class=\"prevNextLatestPlus\">+</div><div class=\"prevNextLatestPlus2\">Next</div></a>
    </div>
    <div id=\"mycarousel\" style=\"height:250px; position:absolute; top:15px; left:20px;\">
        <div class=\"leftPanelBody\"><div class=\"leftPanelBodyHeader\">Blog</div><div class=\"leftPanelBodyTitle\">Vivamus consectetur mattis quam</div><div class=\"leftPanelBodyContent\">Lorem ipsum dolor sit amet,consectetur<br />adipiscing elit. Nulla ut magna sit. +</div><br /><div class=\"leftPanelBodyHeader\">Press</div><div class=\"leftPanelBodyTitle\">Vivamus consectetur mattis quam</div><div class=\"leftPanelBodyContent\">Lorem ipsum dolor sit amet,consectetur<br />adipiscing elit. Nulla ut magna sit. +</div><br /><div class=\"leftPanelBodyHeader\">Blog</div><div class=\"leftPanelBodyTitle\">Vivamus consectetur mattis quam</div><div class=\"leftPanelBodyContent\">Lorem ipsum dolor sit amet,consectetur<br />adipiscing elit. Nulla ut magna sit. +</div>  </div>
        <div class=\"leftPanelBody\"><div class=\"leftPanelBodyHeader\">Press</div><div class=\"leftPanelBodyTitle\">Vivamus consectetur mattis quam</div><div class=\"leftPanelBodyContent\">Lorem ipsum dolor sit amet,consectetur<br />adipiscing elit. Nulla ut magna sit. +</div>  </div>
        <div class=\"leftPanelBody\"><div class=\"leftPanelBodyHeader\">Blog</div><div class=\"leftPanelBodyTitle\">Vivamus consectetur mattis quam</div><div class=\"leftPanelBodyContent\">Lorem ipsum dolor sit amet,consectetur<br />adipiscing elit. Nulla ut magna sit. +</div>  </div>
    </div>
</div>

轮播（按轮播行内联）

<script type=\"text/javascript\">
    $(document).ready(function () {
        try {
            var mcarousel = $(\"#mycarousel\").msCarousel({ BoxClass: \'div.leftPanelBody\',height: 280,width: 240 }).data(\"msCarousel\");
            //add click event
            $(\"#next\").click(function () {
                //calling next method
                mcarousel.next();
            });
            $(\"#prevIoUs\").click(function () {
                //calling prevIoUs method
                mcarousel.prevIoUs();
            });

            var oHandlerRightPanel = $(\"#rightCarousel\").msCarousel({ BoxClass: \'div.rightPanelBody\',width: 240 }).data(\"msCarousel\");
            //add click event
            $(\"#nextR\").click(function () {
                //calling next method
                oHandlerRightPanel.next();
            });
            $(\"#prevIoUsR\").click(function () {
                //calling prevIoUs method
                oHandlerRightPanel.prevIoUs();
            });
        }
        catch (e) {
            alert(e.message);
        }
    });
</script>

提前致谢！如果您需要其他代码，请告诉我。 还有一个.backstretch插件也用于全屏背景。     

解决方法

        正如我在评论中所发布的那样，标题为JQUERY的代码可以用纯CSS表示。我假设

.prevNextLatestMinus

和

.prevNextLatestMinus2

看起来应该不同，并且这不是代码中的特纳。

#previous { text-decoration: none; }

.prevNextLatestMinus,.prevNextLatestMinus2,.prevNextLatestPlus,.prevNextLatestPlus2 {
    cursor: pointer;
}

.prevNextLatestMinus,.prevNextLatestPlus2 { 
    color: #ffffff; 
}

.prevNextLatestMinus:hover,.prevNextLatestPlus2:hover { 
    color: #a43802; 
}

.prevNextLatestMinus2,.prevNextLatestPlus { 
    color: #a43802; 
}

.prevNextLatestMinus2:hover,.prevNextLatestPlus:hover { 
    color: #ffffff; 
}

这里没有关于轮播插件的帮助。