如何在鼠标悬停和鼠标出出时增加选择元素的大小时固定表格的位置

How to fix the position of table while increasing size of select element onmouseover and onmouseout

本文关键字：鼠标 小时 位置 表格 元素 增加 悬停 选择      更新时间：2023-09-26

我必须在鼠标悬停时增加选择元素的宽度，并在鼠标悬停时减小宽度。选择元素在表的 td 元素下定义。我已经做了一些编码来更改其大小，但它会影响表格位置。

如何解决这个问题？

请帮帮我。 

<head>
<script>
function AdjustWidth(ddl) {
var maxWidth = 0;
for (var i = 0; i < ddl.length; i++) {
    if (ddl.options[i].text.length > maxWidth) {
        maxWidth = ddl.options[i].text.length;
    }
}
ddl.style.width = maxWidth * 27 + "px";
}
function AdjustWidthOut(ddl) {
var maxWidth = 0;
for (var i = 0; i < ddl.length; i++) {
    if (ddl.options[i].text.length > maxWidth) {
        maxWidth = ddl.options[i].text.length;
    }
}
ddl.style.width = maxWidth * 7 + "px"; 
}
</script>
</head>
 <table>
  <tr>                            
   <td valign="top"><strong style="color: #3265a6">Area:&nbsp;</strong></td>
   <td>
     <select onmouseover="AdjustWidth(this)" onmouseout="AdjustWidthOut(this)">
         <option value="">x</option>
         <option value="">y</option>
         <option value="">z</option>
         <option value="">x</option>
     </select>
   </td>
  </tr>
 </table>

你的代码似乎做了你指示它做的事情。

在onmouseover，它将select的宽度设置为27px，因为最长的option是一个字符。

在onmouseout中，它将select的宽度设置为7px。

请注意，27px 的宽度不足以显示select中的单个字符。 7px 的宽度几乎不足以显示下拉箭头。

在下面的代码片段中，我添加了 27px 和 7px 的div。 您将看到您的select框在onmouseover和onmouseout期间与它们中的每一个都匹配。

如果希望select更宽，请使用大于 27 和 7 的值。 您可能需要尝试以找到最适合您的方法。

如果您希望select在onmouseout期间恢复到其原始宽度，则可以这样做：

function AdjustWidthOut(ddl) {
  ddl.style.width = 'auto;
}

片段：

function AdjustWidth(ddl) {
  var maxWidth = 0;
  for (var i = 0; i < ddl.length; i++) {
    if (ddl.options[i].text.length > maxWidth) {
      maxWidth = ddl.options[i].text.length;
    }
  }
  ddl.style.width = maxWidth * 24 + "px";
}
function AdjustWidthOut(ddl) {
  var maxWidth = 0;
  for (var i = 0; i < ddl.length; i++) {
    if (ddl.options[i].text.length > maxWidth) {
      maxWidth = ddl.options[i].text.length;
    }
  }
  ddl.style.width = maxWidth * 7 + "px"; 
}
#D1 {
  width: 27px;
  height: 20px;
  background: green;
}
#D2 {
  width: 7px;
  height: 20px;
  background: green;
}
<table>
  <tr>
   <td>27px:
   <td><div id="D1"></div>
  <tr>
   <td>7px:
   <td><div id="D2"></div>
  <tr>                            
   <td valign="top"><strong style="color: #3265a6">Area:&nbsp;</strong></td>
   <td>
     <select onmouseover="AdjustWidth(this)" onmouseout="AdjustWidthOut(this)">
         <option value="">x</option>
         <option value="">y</option>
         <option value="">z</option>
         <option value="">x</option>
     </select>
   </td>
  </tr>
 </table>

您需要为表格和/或行和列设置宽度，否则表格宽度将设置为其内容的 100%。看看我创建的这个小提琴，它只会改变下拉元素的宽度。

http://jsfiddle.net/1k03tvmu/

table{border: 1px solid;}
tr{border: 1px solid;}
td{ width: 100px; position: relative;}
td.content{width: 1000px; }
相关文章：