Javascript/Jquery on event trigger <div class=>

Javascript/Jquery on event trigger <div class=>

本文关键字：div class gt lt on event trigger Javascript Jquery      更新时间：2023-09-26

我有一个带有Javascript的文本/html幻灯片，但是在新文本循环时，我还需要脚本来触发与幻灯片中存在的内容相对应的菜单项上的：hover类。

有关视觉示例，请参阅：https://i.stack.imgur.com/mkyMJ.png

我已将JS代码上传到 http://pastebin.com/Kp4a7VXP 以供查看。

非常感谢您对这家伙的帮助！ :)

非常感谢！

亲切问候杰克

尝试模仿悬停状态可能没有意义，因此最好将 css 类（如 .active）添加到您希望其悬停状态的元素中，然后将悬停状态中的 css 包含在该类中。

我假设你有一个像 CSS

.item{
    /* normal appearance */
}

和 

.item:hover{
   /* appearance when mouse over */
}

但据我所知，没有办法通过javascript触发伪类：hover。但是你可以为此使用一个标准类（但对于语义，我会把它命名为.currentSlide或.activeSlide）

.item:hover,
.item.hover{
    /* appearance when mouse over
       or selected */
}

然后，您可以使用 JavaScript 为当前幻灯片元素添加和删除该类，例如：

currentSlideDiv.classList.add("hover");

编辑：

您可以使用这样的函数，并在NextClick()和PreviousClick()中调用highlightCurrentSlideName(currentContentItem); 

function highlightCurrentSlideName(slideIndex){
    var slideNameList = jQuery('.contentmenu a');
    jQuery(slideNameList).removeClass('current'); //unhighlight all slide names
    var currentSlide = slideNameList[slideIndex];      //select a slide name by a numeric index
    jQuery(currentSlide).addClass('current'); //highlight that element
}

并在您的 CSS 文件上添加一个类，并根据需要设置其样式。

.contentmenu a.current{
    color: lightblue;
    background-color: gray;
}

PS：我不是jQuery程序员，我总是写纯javascript，只是注意到你已经有了它。

相关文章：