基于DOM与JavaScript实现单选按钮悬停显示及单选功能修复

嘿，这俩问题我熟！咱们一步步来解决：

这是单选按钮的经典坑——浏览器是通过name属性来分组实现互斥的，如果每个酒店的radioname不一样，它们就不属于同一组，自然不会互相取消选中状态。

解决方法很简单：给所有酒店对应的单选按钮设置相同的name值，比如统一叫favorite-hotel。同时记得给每个radio设置唯一的id，并让对应的label的for属性和它匹配，这样用户点击酒店名称也能选中单选按钮，体验更好。

举个HTML结构示例：

<!-- 每个酒店项的结构 -->
<div class="hotel-item">
  <input type="radio" name="favorite-hotel" id="hotel-1" value="hotel-1">
  <label for="hotel-1">云顶酒店</label>
  <img src="hotel1.jpg" alt="云顶酒店外观">
</div>
<div class="hotel-item">
  <input type="radio" name="favorite-hotel" id="hotel-2" value="hotel-2">
  <label for="hotel-2">滨海度假酒店</label>
  <img src="hotel2.jpg" alt="滨海度假酒店海景">
</div>

这样设置后，选中第二个酒店的radio时，第一个的就会自动取消选中，完美实现单选效果！

这个用CSS的:hover伪类就能轻松搞定，不需要额外JS。核心思路是默认隐藏单选按钮，当用户hover酒店容器时再显示它。

基础实现（直接显示/隐藏） #

/* 默认隐藏单选按钮 */
.hotel-item input[type="radio"] {
  display: none;
}

/* 当hover酒店项时，显示单选按钮 */
.hotel-item:hover input[type="radio"] {
  display: inline-block; /* 根据你的布局，也可以用inline或block */
}

进阶实现（平滑淡入效果） #

如果想要更自然的过渡效果，可以用opacity配合transition，避免元素突然出现：

.hotel-item input[type="radio"] {
  opacity: 0; /* 完全透明，相当于隐藏 */
  transition: opacity 0.2s ease; /* 0.2秒平滑过渡 */
  /* 可选：给radio加个样式，hover时更显眼 */
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.hotel-item:hover input[type="radio"] {
  opacity: 1; /* 完全显示 */
}

定位优化（比如放在图片角落） #

如果想把单选按钮放在酒店图片的左上角，可以用绝对定位：

.hotel-item {
  position: relative; /* 作为子元素定位的参考 */
  margin-bottom: 15px; /* 调整间距 */
}

.hotel-item input[type="radio"] {
  position: absolute;
  top: 10px;
  left: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
  background: white;
  border: 1px solid #ccc;
  border-radius: 50%;
}

.hotel-item:hover input[type="radio"] {
  opacity: 1;
}

这样调整后，单选按钮就只会在用户hover酒店的时候才出现，平时完全隐藏，不影响页面美观~

内容的提问来源于stack exchange，提问作者OL12_9