html - CSS - 使用 (~) 兄弟运算符的替代方案

Question

我有一个与我的 HTML 和 CSS 代码完美配合的滑块，但是，当我想导入我的电子邮件管理包时，它不允许使用 tildas。

我只是想知道，根据下面的代码，是否可以通过 CSS 定位代码而不是使用 CSS 兄弟运算符，这样我就可以测试是否可以将新调整的代码导入平台。

谢谢你的帮助。下面的代码：

body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  width: 600px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.slider-holder {
  order: -1;
  width: 600px;
  height: 280px;
  background-color: yellow;
  text-align: center;
  overflow: hidden;
}

.image-holder {
  width: 3000px;
  background-color: red;
  height: 280px;
  clear: both;
  position: relative;
  transition: left 7000s;
  /*Use a big value to block the image change*/
  left: 0;
}

.slider-image {
  float: left;
  margin: 0px;
  padding: 0px;
  position: relative;
}

a[href="#slider-image-0"]:hover~.slider-holder .image-holder {
  left: 0.5px;
  /*Yes it's not 0px here, we need something different from the initial state to be able to trigger the transition (Yes I know it's not intuitive ..)*/
  transition: left 1s;
}

a[href="#slider-image-1"]:hover~.slider-holder .image-holder {
  left: -600px;
  transition: left 1s;
}

a[href="#slider-image-2"]:hover~.slider-holder .image-holder {
  left: -1200px;
  transition: left 1s;
}

a[href="#slider-image-3"]:hover~.slider-holder .image-holder {
  left: -1800px;
  transition: left 1s;
}

a[href="#slider-image-4"]:hover~.slider-holder .image-holder {
  left: -2400px;
  transition: left 1s;
}

.button-holder>a>img {
  padding-left: 35px;
  padding-right: 35px;
}

<div class="container">
  <a href="#slider-image-0"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a>
  <a href="#slider-image-1"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a>
  <a href="#slider-image-2"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a>
  <a href="#slider-image-3"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a>
  <a href="#slider-image-4"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a>
  <div class="slider-holder">
    <div class="image-holder">
      <img src="https://via.placeholder.com/600x280/ff0000" class="slider-image" />
      <img src="https://via.placeholder.com/600x280/00ff00" class="slider-image" />
      <img src="https://via.placeholder.com/600x280/f0f0f0" class="slider-image" />
      <img src="https://via.placeholder.com/600x280/0000ff" class="slider-image" />
      <img src="https://via.placeholder.com/600x280" class="slider-image" />
    </div>
  </div>
</div>

标签： htmlcss

Answer 1

您可以使用+接受下一个元素的运算符。请注意，要使其正常工作，您必须链接多个元素才能到达滑块

body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  width: 600px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.slider-holder {
  order: -1;
  width: 600px;
  height: 280px;
  background-color: yellow;
  text-align: center;
  overflow: hidden;
}

.image-holder {
  width: 3000px;
  background-color: red;
  height: 280px;
  clear: both;
  position: relative;
  transition: left 7000s;
  /*Use a big value to block the image change*/
  left: 0;
}

.slider-image {
  float: left;
  margin: 0px;
  padding: 0px;
  position: relative;
}

a[href="#slider-image-0"]:hover + .slider-holder .image-holder {
  left: 0.5px;
  /*Yes it's not 0px here, we need something different from the initial state to be able to trigger the transition (Yes I know it's not intuitive ..)*/
  transition: left 1s;
}

a[href="#slider-image-1"]:hover + a + a + a + .slider-holder .image-holder {
  left: -600px;
  transition: left 1s;
}

a[href="#slider-image-2"]:hover + a + a +.slider-holder .image-holder {
  left: -1200px;
  transition: left 1s;
}

a[href="#slider-image-3"]:hover + a + .slider-holder .image-holder {
  left: -1800px;
  transition: left 1s;
}

a[href="#slider-image-4"]:hover + .slider-holder .image-holder {
  left: -2400px;
  transition: left 1s;
}

.button-holder>a>img {
  padding-left: 35px;
  padding-right: 35px;
}

<div class="container">
  <a href="#slider-image-0"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a>
  <a href="#slider-image-1"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a>
  <a href="#slider-image-2"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a>
  <a href="#slider-image-3"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a>
  <a href="#slider-image-4"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a>
  <div class="slider-holder">
    <div class="image-holder">
      <img src="https://via.placeholder.com/600x280/ff0000" class="slider-image" />
      <img src="https://via.placeholder.com/600x280/00ff00" class="slider-image" />
      <img src="https://via.placeholder.com/600x280/f0f0f0" class="slider-image" />
      <img src="https://via.placeholder.com/600x280/0000ff" class="slider-image" />
      <img src="https://via.placeholder.com/600x280" class="slider-image" />
    </div>
  </div>
</div>