javascript - 事件触发器上的 Javascript/Jquery

Question

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

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

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

非常感谢您对这些人的帮助！:)

非常感谢！

亲切的问候，杰克

Answer 1

尝试模仿悬停状态可能没有意义，因此最好有一个 css 类，例如.active添加到您想要悬停状态的元素中，然后将悬停状态中的 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，只是注意到你已经有了它。