Question

所以这是我想要实现的概念： sketch

对于那些无法查看图像的人，我有一个下拉菜单（标题为“预设”），其中包含一个单选按钮列表，每个按钮代表不同的预设，在单选按钮上悬停/选择时，预设对应单击该单选按钮（在鼠标上方悬停）并在另一个div元素上实现（在选择单选按钮时）。

<nav id="topNav">
<ul style="list-style: none;">
<li>
  <a href="#" title="Nav Link 2">presets</a>
  <ul style="list-style: none;">
    <li><input type="radio" class="rb" id="pr1" name="preset" value="1" checked="checked">Preset 1</li>
    <li><input type="radio" class="rb" id="pr2" name="preset" value="2">Preset 2</li>
    <li><input type="radio" class="rb" id="pr3" name="preset" value="3">Preset 3</li>
    <li><input type="radio" class="rb" id="pr4" name="preset" value="4">Preset 4</li>
  </ul>
</li>

      <div id="a"></div>

Here是我尝试执行此操作。我在排除故障时遇到了一些问题（因此我需要对自己进行故障排除才能解决问题）：

每次刷新页面时，默认情况下菜单似乎都会下拉。有没有办法让菜单在刷新时保持紧凑？
从我的小提琴中，你会注意到我的CSS，我试图让我的单选按钮悬停特征（作为在div元素上预览他们的礼物的一种方式），但无济于事。我想我需要使用脚本，对吧？具体来说，当鼠标光标悬停在预设上时，div元素将暂时表达该预设的细节（在这种情况下，是不同的颜色），并且当选择预设时，div元素将其当前颜色更改为选择预设。
我打算通过让用户选择div元素的预设并发送表单将其保存在数据库上来扩展它。鉴于我想要的功能，我是否会在浏览器兼容性方面遇到麻烦？

Answer 1

您可以在正在使用的display:none元素上设置ul作为下拉列表。
最实用的方法是为每个mouseenter项添加mouseleave和li个事件侦听器。在mouseenter上，您将预览div的颜色设置为与发生事件的li元素相关联的颜色。在mouseleave上，您可以将其设置回原始颜色。
对于大多数浏览器来说应该不是问题。

以下是fiddle的修改版本，展示了所需的行为。

制作包含单选按钮的下拉菜单

1 个答案: