无法切换悬停以显示另一个项目列表

Question

我正在尝试使用切换显示更多详细信息。代码片段如下：样式：

<style>
    .flyout {
        position:relative;
        width:100px;
        height:150px;
        background:lightblue;
        overflow: hidden;
        z-index:10000;
    }
    .hidden{
        display:none;
    }
</style>

悬停时更改 class 的脚本：

<script>
    $j = jQuery.noConflict();

    $j(document).ready(function() {
        $j("#menu").hover(function() {
            $j('.hidden').toggleClass('flyout');
        });
    });
</script>

这是默认隐藏的部分：

<ul class="hidden">
    <apex:repeat value="{!Leads}" var="m">
        <li class="leads" >{!m.description__c}<div></div>{!m.assigneddate__c}<div></div>{!m.details__c}</li>        
    </apex:repeat>
</ul>

这是默认显示的部分，在上面的详细信息中显示在悬停鞋上：

<ul class="sideBarList" id="menu">
    <apex:repeat value="{!Leads}" var="m" id="menu">
        <li class="leads">{!m.name}<div></div>{!m.CreatedDate}<div></div>{!m.object__c}</li>        
    </apex:repeat>
</ul>

Answer 1

这样试试

              <script>
                $j = jQuery.noConflict();
                $j(document).ready(function(){
                $j("#menu").hover(function(){
                $j('#menuLink').toggleClass('hidden');
             });
                    });
             </script>

修改此部分已添加id="menuLink"

<ul id="menuLink" class="hidden">
         <apex:repeat value="{!Leads}" var="m">
             <li class="leads" >{!m.description__c}<div></div>{!m.assigneddate__c}<div></div>{!m.details__c}</li>        
         </apex:repeat>
      </ul>

无法切换悬停以显示另一个项目列表

Unable to toggle on hover in to display another list of items

jquery

css

visualforce