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

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">

这可能是最简单的方法。