javascript - Javascript/PHP/Codeigniter 中的悬停事件

Question

提供一些背景信息:我有一个 php 函数“showSystems”，它从我们的 CMDB 中提取数据并将其显示在由 Codeigniter 表单助手“form_dropdown”生成的下拉列表中。因此，下拉列表包含我们所有服务器的名称，当单击其中一个服务器时，其他一些不相关的功能会显示有关该特定系统的不同类型的信息。

我现在想要实现的是，当将鼠标悬停在下拉列表中列出的系统上时，该系统的描述显示在列表下的标签中。当没有任何东西悬停时，标签被隐藏。

类似于:

Dropdown:
Server1
Server2  <-- hover over this
Server3

Label --> shows Description of Server2

如何使用 php/javascript 处理此生成的下拉列表中的 mosehover-event？

编辑:所以我提供了更多背景信息，因为它似乎与我的技术设置有关。

使用接收到的数据生成下拉菜单的函数是用 Codeigniter 模型编写的:

 <?php
 echo '<select class="minipanel" id="selectminipanel"  size="25" style="width: 100%" onchange="window.location = \''.site_url(CONTROLLER.'/showItem').'/\' + this.value;">';
         foreach($tmp as $key => $value):
                if ($active == $key){
                    echo '<option onmouseover="displayDescription(this)" onmouseout="hideLabel()" value="'.$key.'" server-description="'.$value[1].'" selected>'.$value[0].'</option>';
                } else {
                    echo '<option onmouseover="displayDescription(this)" onmouseout="hideLabel()" value="'.$key.'" server-description="'.$value[1].'">'.$value[0].'</option>';
                }
         endforeach;
 echo '</select>';
 ?>

该模块通过 View (加载模型)加载到模板中。标签是在 codeigniter 调用之后定义的:

 <?php $this->load->view("V".$this->name."/vMinipanel"); ?>
 <label id="description"></label>

脚本也写在这个模板的头部:

 <script language="JavaScript">
 function displayDescription($ele) {
          var server_data = ele.server-description;
          document.getElementById('description').innerHTML = server_data;
 }
 function hideLabel() {
          document.getElementById('description').innerHTML ='';
 }
 </script>

那么，为什么没有调用函数displayDescription和hideLabel？

Answer 1

请检查并运行以下代码:

<a href="#" title="server 1 description">server 1</a><br>
<a href="#" title="server 2 description">server 2</a><br>
<a href="#" title="server 3 description">server 3</a>