jQuery .mouseover 和 .css 在 IE 中工作但在 Safari 或 Chrome 中不工作

Question

当您在 IE 中进行鼠标悬停时，css 和 mouseover 以及 mouseout 可以完美运行 - 并且它们可以正常运行轮播。然而，在 Chrome 或 Safari 中，元素根本没有样式化，即使它们位于 anchor 标记中，它们也不可点击。悬停在 Safari 或 Chrome 中不起作用。基本上，文本就像是静态文本一样。

** 然而，唯一适用于 Safari 和 Chrome 标签的样式是 text-decoration:none 调用。

CSS 和轮播触发器应该适用于所有 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><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">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">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>  </div>
    </div>
</div>

CAROUSEL(按照 mcarousel 方向内联)

<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', height: 280, 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 插件。

Answer 1

正如我在评论中发布的那样，您在标题 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; 
}

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