MooTools 手风琴鼠标悬停答案

【问题标题】：MooTools accordion mouseoverMooTools 手风琴鼠标悬停
【发布时间】：2014-12-15 13:15:06
【问题描述】：

我在互联网上看到了带有 mootools 的手风琴。但这是一个点击事件。我想要一个鼠标悬停来打开手风琴。我已经绑定了，但它不起作用。

有人可以帮助我吗？提前致谢

window.addEvent('domready', function() 
{
    var myAccordion = new Accordion
    (
        $('accordion'), 'div.toggler', 'div.element', 
        {

        opacity: false,
        display: 0,
        alwaysHide: true,


        // WHEN A PART IS OPEN
        onActive: function(toggler, element)
        {
            toggler.setStyle('color', '#FF4A6F');
        },

        // WHEN A PART IS CLOSED
        onBackground: function(toggler, element)
        {
            toggler.setStyle('color', '#585858');
        }

    // END ACCORDION H3, DIV.ELEMENT
    }
// END VAR NEW ACCORDION
);
// END FUNCTION
});

我的html：

 <div id="homeBox_img">
                        <div id="slideshow-container">
                            <img src="img/image1.jpg"  width="345" height="301" alt="introducing img" />
                            <img src="img/image2.jpg"  alt="introducing img" />
                            <img src="img/image3.jpg" width="345" height="301" alt="introducing img" />

                        </div>
                    </div>

【问题讨论】：

请记住，这可能会产生一些奇怪的行为，因为当手风琴展开时，hover 可能最终会出现在另一个切换器中......无论如何，您可以构建自己的手风琴或附加@987654324 @ 到鼠标悬停的切换器。如果您发布您的 HTML，也许我们可以提供更好的帮助。

标签： mootools accordion mouseover

【解决方案1】：

要成功构建手风琴，必须有切换器元素的集合（如下面示例中的h2 元素）和内容元素的集合（'.content'）。我看不出您添加的 html 与脚本有什么关系，但这里有一个基本示例，其中元素的更改是由 'mouseenter' 事件触发的。

JS：

new Fx.Accordion(
    '#accordion h2', '#accordion .content', { trigger: 'mouseenter' }
);

HTML：

<div id="accordion">
    <h2>image1</h2>
    <div class="content">
        <img src="img/image1.jpg" width="345" height="301" alt="introducing img" />
    </div>
    <h2>image2</h2>
    <div class="content">
        <img src="img/image2.jpg" width="345" height="301" alt="introducing img" />
    </div>
    <h2>image3</h2>
    <div class="content">
        <img src="img/image3.jpg" width="345" height="301" alt="introducing img" />
    </div>

http://mootools.net/docs/more/Fx/Fx.Accordion#Fx-Accordion
http://mootools.net/demos/?demo=Accordion

【讨论】：