In the code of the page, a script is connected that adds the class active to the div, on which the mouse is hovering.

<script type="text/javascript" src="/jquery/jquery-1.8.0.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ $("div.right div.floatbox").hover(function() { $(this).toggleClass("active"); }); }); </script>

plus the carousel slider is also connected http://sorgalla.com/jcarousel/

 <script type="text/javascript" src="/netcat_template/jquery/jquery.jcarousel.min.js"></script> <script type="text/javascript"> function mycarousel_initCallback(carousel) { // Disable autoscrolling if the user clicks the prev or next button. carousel.buttonNext.bind('click', function() { carousel.startAuto(0); }); carousel.buttonPrev.bind('click', function() { carousel.startAuto(0); }); // Pause autoscrolling if the user moves with the cursor over the clip. carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); }); }; jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ auto: 2, wrap: 'circular', scroll: 1, visible: 1, animation: 5000, buttonNextHTML: null, buttonPrevHTML: null, initCallback: mycarousel_initCallback, itemFallbackDimension: 100 }); }); </script> <!-- Стили для слайдера --> <style type="text/css"> div#teaser { overflow: hidden; } .teaser-link { width: 628px; } .mycarousel-style { width: 628px; padding: 0; } </style>

html code

 <div class="page_margins"><div id="teaser-box"><div id="teaser"> <!-- Слайдер --> <div class="left"> <ul id="mycarousel" class="mycarousel-style"><li> <div class="teaser-link"> <h3><a href="/">СКИДКИ ДО 20%</a></h3> <p>В этом слайдере можно выводить информацию актуальных акциях, специальных предложениях и т.д. <a href="/">Подробнее</a></p> </div> <img src="/images/image.jpg" height="318" width="628" /></li></ul> </div> <!-- Акции и предложения --> <div class="right"> <h2>Акции и предложения</h2> <div class="news-teaser floatbox"> <a href="/news/news_3.html" class="preview icaption_left"><img src="images/teaser-news.jpg" alt="teaser-news.jpg, 2,3kB" title="Teaser news" border="0" height="54" width="74"></a> <span class="date"> 31 августа 2012</span> <h3><a href="/news/news_4.html">Реорганизация предприятия</a></h3> </div> <div class="news-teaser floatbox active"> <a href="/news/news_3.html" class="preview icaption_left"><img src="images/teaser-news.jpg" alt="teaser-news.jpg, 2,3kB" title="Teaser news" border="0" height="54" width="74"></a> <span class="date"> 31 августа 2012</span> <h3><a href="/news/news_4.html">Реорганизация предприятия</a></h3> </div> </div> </div></div></div>

after connecting the slider-carousel script, the script that adds the class to the div stops working. Tell me, what can this be caused?

    1 answer 1

    jQuery.noConflict to help

    • tried, does not help. - Heidel
    • one
      what's in console when booting? - Barton
    • which console? do you mean a firebug? - Heidel
    • that's his - Barton
    • Thank you very much, it turned out that the layer with the slider-carousel turned out to be higher than the layer where the active class is added to the diva, so the hover function did not work. all corrected) - Heidel