MooTools accordion mouseover

Question

我在互聯網上看到了一個手風琴與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> 

Answer 1

要成功構建一個手風琴，必須有toggler元素的集合（下面的例子像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