Css 为什么在每行悬停时下拉元素会向左移动？_Css_Drop Down Menu_Hover_Jquery Ui Selectmenu

Css 为什么在每行悬停时下拉元素会向左移动？

css drop-down-menu

Css 为什么在每行悬停时下拉元素会向左移动？,css,drop-down-menu,hover,jquery-ui-selectmenu,Css,Drop Down Menu,Hover,Jquery Ui Selectmenu,我使用jQueryUI的selectMenu小部件创建了一个下拉列表，如下图所示：下面给出的是用于此的HTML代码 <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Selectmenu - Custom

我使用jQueryUI的selectMenu小部件创建了一个下拉列表，如下图所示：

下面给出的是用于此的HTML代码

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - Custom Rendering</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <label for="options">Select an Option:</label>
    <select id="options">
  <optgroup label="PREFERRED OPTIONS">
    <option data-short="L" data-price="$0.00">Standard Screw Adjustment</option>
    <option data-short="K" data-price="$0.00">Standard Screw Adjustment</option>
  </optgroup>
  <optgroup label="STANDARD OPTIONS">
    <option data-short="C" data-price="$5.00" >Tamper Resistant - Factory Set</option>
    <option data-short="K" data-price="$6.00" >Handknob</option>
  </optgroup>
  <optgroup label="ADDITIONAL OPTIONS">
    <option data-short="F" data-price="-$4.00">Hex Head Screw with Locknut</option>
    <option data-short="G" data-price="$4.00">Hex Head Screw with Locknut</option>
    <option data-short="H" data-price="$4.00" >Hex Head Screw with Locknut</option>
  </optgroup>
</select>

</body>

</html>

$(function() {
  $.widget("custom.mySelectMenu", $.ui.selectmenu, {
    _renderMenu: function(ul, items) {
      var that = this,
        currentCategory = "";
      $.each(items, function(index, item) {
        var li, name, short, price;
        if (item.optgroup != currentCategory) {
          ul.append(
            "<li class='ui-selectmenu-category'>" +
              item.optgroup +
              "</li>"
          );
          currentCategory = item.optgroup;
        }
        li = that._renderItemData(ul, item);
        console.log(ul);
        name = li.text();
        short = item.element.data("short");
        price = item.element.data("price");
        console.log(li, short, price);
        li.prepend(
          $("<span>", {
            class: "short"
          }).html(short)
        );

        li.append(
          $("<span>", {
            class: "price"
          }).html(price)
        );
        if (item.optgroup) {
          li.attr("aria-label", item.optgroup + " : " + item.label);
        }
      });
    }
  });

  $("#options").mySelectMenu({
    width: 300
  });
  $("#options")
    .mySelectMenu("menuWidget")
    .addClass("overflow");
});

下面给出了这方面的Javascript代码

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - Custom Rendering</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <label for="options">Select an Option:</label>
    <select id="options">
  <optgroup label="PREFERRED OPTIONS">
    <option data-short="L" data-price="$0.00">Standard Screw Adjustment</option>
    <option data-short="K" data-price="$0.00">Standard Screw Adjustment</option>
  </optgroup>
  <optgroup label="STANDARD OPTIONS">
    <option data-short="C" data-price="$5.00" >Tamper Resistant - Factory Set</option>
    <option data-short="K" data-price="$6.00" >Handknob</option>
  </optgroup>
  <optgroup label="ADDITIONAL OPTIONS">
    <option data-short="F" data-price="-$4.00">Hex Head Screw with Locknut</option>
    <option data-short="G" data-price="$4.00">Hex Head Screw with Locknut</option>
    <option data-short="H" data-price="$4.00" >Hex Head Screw with Locknut</option>
  </optgroup>
</select>

</body>

</html>

$(function() {
  $.widget("custom.mySelectMenu", $.ui.selectmenu, {
    _renderMenu: function(ul, items) {
      var that = this,
        currentCategory = "";
      $.each(items, function(index, item) {
        var li, name, short, price;
        if (item.optgroup != currentCategory) {
          ul.append(
            "<li class='ui-selectmenu-category'>" +
              item.optgroup +
              "</li>"
          );
          currentCategory = item.optgroup;
        }
        li = that._renderItemData(ul, item);
        console.log(ul);
        name = li.text();
        short = item.element.data("short");
        price = item.element.data("price");
        console.log(li, short, price);
        li.prepend(
          $("<span>", {
            class: "short"
          }).html(short)
        );

        li.append(
          $("<span>", {
            class: "price"
          }).html(price)
        );
        if (item.optgroup) {
          li.attr("aria-label", item.optgroup + " : " + item.label);
        }
      });
    }
  });

  $("#options").mySelectMenu({
    width: 300
  });
  $("#options")
    .mySelectMenu("menuWidget")
    .addClass("overflow");
});

$（函数（）{
$.widget（“custom.mySelectMenu”，$.ui.selectmenu{
_renderMenu：功能（ul，项目）{
var=这个，
currentCategory=“”；
$。每个（项目、功能（索引、项目）{
var li，名称，简称，价格；
if（item.optgroup！=currentCategory）{
附加(
“”+
item.optgroup+
“”
);
currentCategory=item.optgroup；
}
li=该值。_renderItemData（ul，项目）；
控制台日志（ul）；
name=li.text（）；
short=项目.元素.数据（“short”）；
价格=项目.要素.数据（“价格”）；
console.log（li，short，price）；
李。预编(
$("", {
班级：“短”
}).html（短）
);
李安(
$("", {
类别：“价格”
}).html（价格）
);
if（item.optgroup）{
li.attr（“aria标签”，item.optgroup+”：“+item.label）；
}
});
}
});
$（“#选项”）.mySelectMenu({
宽度：300
});
$（“#选项”）
.mySelectMenu（“menuWidget”）
.addClass（“溢出”）；
});

现在，我的问题是，每当我将光标悬停在任何一行上时，该悬停行的元素都会被选中。但我希望我的元素被固定在这个位置。我知道问题与

.ui state active

类有关。不管我知道什么，我已经尝试了很多技巧，但没有一个对我有效。我是CSS的初学者。请帮助。下面是描述这些元素如何移动的图片

有人能提供解决此问题的方法吗？

在

css

文件中，您需要在

.ui state active

类中添加0边距。悬停导致出现-1的边距。之后，当你上下悬停时，你需要阻止它跳跃。为此，您可以删除所有边框属性，并添加

outline:1px solid#ccc

属性。将当前的

.ui菜单项.ui菜单项包装器.ui state active

块替换为此处的应该可以解决您的问题（至少它们在代码笔中解决了）

要固定更高分辨率的宽度，您可以将

min width

属性添加到

.ui选择菜单类别

.ui-selectmenu-category {
  color: #5f5f5f;
  padding: 0.5em 0.25em;
  min-width: 290px;
}

尝试将边框更改为大纲。您能否提供更多代码或在Plunker上创建一些类似的示例？例如，谁调用

\u renderMenu

？这只是一个例子。请提供您的问题的工作示例。@Chris，我已经提供了问题详细信息中的所有代码。下面是我在代码笔中的代码的工作示例：感谢您提供的实时代码。这样就更容易找到问题了，但这不起作用。添加您所说的内容会导致价格栏在悬停时底部移动。但这不是我们想要的。悬停时，每行元素的位置应该是固定的。也许你只需要把宽度调大一点。对我有用吗？我添加了一张它为我工作的照片。我正在使用Chrome。是否可以删除显示在每列末尾的垂直线段。例如：在L和标准螺钉调整之间以及$0.00。我只需要水平轮廓/边框，而不是垂直轮廓/边框。怎么做？问题是你使用的分辨率比我高。我添加了

minwidth:290px

到

。ui选择menu category

，这似乎解决了问题。