切换跨度悬停上的选择元素？

Question

看来我第一次尝试提问这个问题是相当含糊的，所以我会重新格式化我的问题。

我目前正在处理<select></select>元素，并且我已经剥离了它所有样式的元素以试图应用我自己的元素。我设法以更具视觉吸引力的方式设计元素的样式。但是，据说当我尝试与元素交互时，我遇到了困难。

当跨度直接位于元素上方时，我似乎无法打开元素;然而，如果我使用pointer-events:none;跨度然后失去它的悬停。

我可能完全忽略了这一点，这可能是一个简单的修复，但是非常感谢任何帮助。

我的元素结构如下，

/* CSS */

#s-wrap {
  background-color: #0ff;
  padding: 2em;
  width: 150px;
  height: 60px;
  
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
input,
select,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-border-radius: 0;
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -moz-border-radius: 0;
  /* Firefox 1-3.6 */
  border-radius: 0;
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
}
input + span {
  opacity: 0;
  transition: all 0.3s;
}
input:hover + span {
  opacity: 1;
  padding-left: 10px;
}
.frm-ele {
  padding: .5em 1em;
  margin: .5em .5em;
  font-size: 12pt;
  color: #4f4f4f;
  border: none;
  background-image: none;
  background-color: #fff;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.sel-ele {
  width: 130px;
}
#arrow {
  float: right;
  margin-right: 1em;
  width: 10px;
  height: 10px;
  border-top: 3px solid #4f4f4f;
  border-right: 3px solid #4f4f4f;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";
  -webkit-transition: -webkit-transform .2s ease-in-out;
  -ms-transition: -ms-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
}
#wrap {
  position: relative;
  display: inline-block;
  width: 146px;
}
#wrap span:hover > #arrow {
  transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
#wrap span {
  position: absolute;
  width: 130px;
  padding: .78em 0;
  margin: .5em .5em;
  cursor: pointer;
  top: 0px;
  right: 0px;
}

<div id="s-wrap">
  <div id="wrap">
    <select name="day" required="" class="frm-ele sel-ele">
      <option value="">Day</option>
      <?php for ($day=1 ; $day <=3 1; $day++) { ?>
      <option value="<?php echo strlen($day)==1 ? '0'.$day : $day; ?>">
        <?php echo strlen($day)==1 ? '0'.$day : $day; ?>
      </option>
      <?php } ?>
    </select><span class="arr"><div id="arrow"></div></span>
  </div>
</div>

页面中的元素看起来像这样;

我在Stack上的另一个帖子中看到了这个代码，但它并没有在firefox中支持，所以这个解决方案对我没有好处，除非我可以在Firefox中使用它。但是，我对Jquery不够熟练。

我在下面提供了此代码;

来源代码

$('span').click(function() {
  var e = document.createEvent('MouseEvents');
  e.initMouseEvent('mousedown');
  $('select')[0].dispatchEvent(e);
});

更新：重新构建我的问题，并提供所有元素。

Answer 1

在~元素上使用包含pointer-event: none;的同级选择器<span>：

＆＃13;

＆＃13;

/* CSS */

#s-wrap {
  background-color: #0ff;
  padding: 2em;
  width: 150px;
  height: 60px;
  
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
input,
select,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-border-radius: 0;
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -moz-border-radius: 0;
  /* Firefox 1-3.6 */
  border-radius: 0;
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
}
input + span {
  opacity: 0;
  transition: all 0.3s;
}
input:hover + span {
  opacity: 1;
  padding-left: 10px;
}
.frm-ele {
  padding: .5em 1em;
  margin: .5em .5em;
  font-size: 12pt;
  color: #4f4f4f;
  border: none;
  background-image: none;
  background-color: #fff;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.sel-ele {
  width: 130px;
}
#arrow {
  float: right;
  margin-right: 1em;
  width: 10px;
  height: 10px;
  border-top: 3px solid #4f4f4f;
  border-right: 3px solid #4f4f4f;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";
  -webkit-transition: -webkit-transform .2s ease-in-out;
  -ms-transition: -ms-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
}
#wrap {
  position: relative;
  display: inline-block;
  width: 146px;
}
#wrap select {
  cursor: pointer;
}
#wrap select:hover ~ span > #arrow {
  transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
#wrap span {
  position: absolute;
  width: 130px;
  padding: .78em 0;
  margin: .5em .5em;
  cursor: pointer;
  top: 0px;
  right: 0px;
  pointer-events:none;
}

＆＃13;

<div id="s-wrap">
  <div id="wrap">
    <select name="day" required="" class="frm-ele sel-ele">
      <option value="day">Day</option>
      <option value="day-2">Day 2</option>
    </select><span class="arr"><div id="arrow"></div></span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;