事件触发器上的Javascript / Jquery <div class =“”> </div>

Question

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

有关可视化示例，请参阅：http://i.stack.imgur.com/mkyMJ.png

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

真的很感谢你对这些家伙的帮助！ ：）

非常感谢！

亲切的问候， 杰克

Answer 1

尝试模仿悬停状态可能没有意义，因此将.active等css类添加到您想要悬停状态的元素中可能更好，然后包含来自的css该班的悬停状态。

Answer 2

我假设你有一个像

这样的CSS

.item{
    /* normal appearance */
}

和

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

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

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

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

currentSlideDiv.classList.add("hover");

---

修改

您可以使用这样的功能，并在highlightCurrentSlideName(currentContentItem);和NextClick()

内拨打PreviousClick()

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，只是注意到你已经有了它。