jQuery .mouseover и .css работают в IE, но не в Safari или Chrome - PullRequest
Новая
       1

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

0 голосов
/ 14 июня 2011

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

** Однако ЕДИНСТВЕННЫМ стилем, который работает с тегами в Safari и Chrome, является оформление текста: нет вызова.

Триггер 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.

1 Ответ

2 голосов
/ 14 июня 2011

Как я уже писал в своем комментарии, ваш код под заголовком 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; 
}

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

...