Question

When you mouseover in IE, the css and mouseover and mouseout work perfectly – AND they function the carousel properly. However, in Chrome or Safari the elements are not being styled at all and even though they are in a anchro tag they are not clickable. Hover is not working in Safari or Chrome. basically, the text is acting as though it were static text.

** However, the ONLY styling that works on the tags in Safari and Chrome is the text-decoration:none call.

The CSS AND carousel trigger should work in all 3 browsers. Anyone see why? 😉

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 (inline per mcarousel directions)

<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>

Thanks in advance! Please let me know if you require anymore code.

There is a .backstretch plugin being used for a full-screen background also.

Answer 1

As I posted in my comment your code under the headline JQUERY could be expressed by plain CSS. I assume you .prevNextLatestMinus and .prevNextLatestMinus2 should look different, and it’s not a turner in your code.

#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; 
}

No help with the carousel plugin here.