jQuery .mouseover и .css работают в IE, но не в Safari или Chrome

Когда вы наводите курсор мыши в IE, css и mouseover и mouseout работают отлично - И они правильно работают с каруселью. Однако в Chrome или Safari элементы вообще не стилизованы, и даже если они находятся в теге анхро, они не кликабельны. Hover не работает в Safari или Chrome. в основном, текст ведет себя так, как если бы это был статический текст.

** Однако ЕДИНСТВЕННЫЙ стиль, который работает с тегами в Safari и Chrome, — это вызов text-decoration:none.

Триггер CSS AND carousel должен работать во всех трех браузерах. Кто-нибудь понимает, почему? ;)

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>

КАРУСЕЛЬ (встроенная по направлениям 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.


person CSSHell    schedule 14.06.2011    source источник
comment
Почему вы используете JavaScript для установки значений css для тега a? Всего этого можно добиться с помощью простого CSS с использованием :hover.   -  person DanielB    schedule 14.06.2011
comment
Если вы присмотритесь, вы увидите, что функциональность не позволяет использовать CSS. Там много отдельных элементов, которые изменяются как независимо друг от друга, так и внутри элементов. Пожалуйста, поделитесь, если у вас есть отличное решение, которое точно соответствует поведению элементов.   -  person CSSHell    schedule 14.06.2011
comment
Кстати, я пытался использовать чистый CSS, и он просто не работал должным образом.   -  person CSSHell    schedule 14.06.2011
comment
Но это не обязательно означает, что это невозможно сделать ;-) Возможно, проблема в частях кода, которыми вы нам не поделились.   -  person DanielB    schedule 14.06.2011


Ответы (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; 
}

Здесь нет помощи с плагином карусели.

person DanielB    schedule 14.06.2011
comment
Пока что ты сделал меня лжецом. :) Это работает в IE, но по-прежнему не работает в Safari или Chrome. - person CSSHell; 14.06.2011
comment
Вы полностью доказали мою неправоту в отношении CSS. Я благодарю вас за ваше понимание. - person CSSHell; 14.06.2011