在固定光标上显示整个文本

Question

根据我的要求，我创建了这个 styled-select，它显示在下面的示例中。现在，如果选项比框架长，它们将不会显示（这是我所需要的）。我想要一些功能，以便将光标留在任何选项上，并且该选项的整个文本显示在 info-box 行。我知道我应该使用 hover 但我不记得该功能的名称。

Working jsFiddle

 $(function() {

   $('.styled-select select').hide();
   $("select#elem").val('0');

   $('.styled-select div').each(function() {
     var $container = $(this).closest('.styled-select');
     $(this).html($container.find('select option:selected').text());
   });

   $('.styled-select div').click(function() {
     var $container = $(this).closest('.styled-select');
     var opLen = $container.find('select').children('option').length;
     if (opLen < 5) {
       $container.find('select').show().attr('size', opLen).focus();
     } else {
       $container.find('select').show().attr('size', 5).focus();
     }
   });

   $('.styled-select select').click(function() {
     var $container = $(this).closest('.styled-select');
     var text = $container.find('select option:selected').text();
     $container.find('div').html(text);
     $container.find('select').hide();
   });

   $('.styled-select select').focusout(function() {
     var $container = $(this).closest('.styled-select');
     $container.find('select').hide();
   });

 });

 .styled-select select {
   position: absolute;
   background: transparent;
   padding-top: 5px;
   font-size: 18px;
   font-family: 'PT Sans', sans-serif;
   color: black;
   border: 0;
   border-radius: 4;
   -webkit-appearance: none;
   -moz-appearance: none;
   -o-appearance: none;
   z-index: 1;
   outline: none;
   top: 42px;
   box-shadow: 0 2px 2px 0 #C2C2C2;
 }
 .styled-select {
   background: url('../img/campaignSelector.png') no-repeat right;
   background-color: white;
   height: 42px;
   position: relative;
   margin: 0 auto;
   box-shadow: 0 2px 2px 0 #C2C2C2;
   background-position: 97% 50%;
 }
 .styled-select option {
   font-size: 18px;
   background-color: white;
   margin-left: 3px;
 }
 .styled-select option:hover {
   //here 

 }

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<div class="styled-select" style="width: 301px; margin:5px 0 0 10px;">
  <div id="userChannelDivId" style="font-size:18px; position: absolute; top: 8px; left: 5px; width: 300px; height: 42px; text-overflow: ellipsis; padding: 0 30px 0 0; white-space: nowrap; overflow: hidden;"></div>
  <select id="userChannelId" name="userChannelId" style="width:100%">
    <option value="">--- Select ---</option>
    <option value="6040224291703">This is a text long enough to go outside frame 01</option>
    <option value="6036780606903">This is a text long enough to go outside frame 02</option>
    <option value="6038009946703">This is a text long enough to go outside frame 03</option>
    <option value="6037196648903">This is a text long enough to go outside frame 04</option>
    <option value="6040601588703">This is a text long enough to go outside frame 05</option>
    <option value="6040080586303">This is a text long enough to go outside frame 06</option>
    <option value="6040602117503">This is a text long enough to go outside frame 07</option>
    <option value="6038006580703">This is a text long enough to go outside frame 08</option>
  </select>
</div>

更新：

我不能使用 title 因为这些选项是通过从数据库中获取数据生成的，如下所示：

<form:select id="campaignGoalId" path="campaignStructureList[${status1.index}].dataSourceModelList[${status2.index}].goalId" style="position: absolute;">
    <form:option value="" label="--- Select ---" />
    <form:options  items="${campaignConfigurationModel.gaGoalList}" itemValue="goalId" itemLabel="goalIdName" />
</form:select>

Answer 1

为什么不使用 title 属性？

<option title="This is a text long enough to go outside frame 08">

这可能是最简单的方法。

在固定光标上显示整个文本

Show whole text on fixed cursor

html

css

overflow

tooltip