当其他人徘徊时，保持相邻

Question

请看这个例子：https://jsfiddle.net/ptss94gw/

只有CSS可以让.more-icons div在.h-icon之外悬停时保持可见吗？

Answer 1

你在说这个吗？

我所做的是将悬停状态更改为属于.icon-line而不是锚点本身。

.icon-line {
    float: left;
    a {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;   
    }
    &:hover .h-icon {
        i {
            opacity: 1;
        }
        & ~ .more-icons {
            opacity: inherit;
        }
    }
}
.h-icon {
     i {
         display: block;
     }
    &.test {
        float: right;
        display: inline-block;
        width: 16px;
        height: 16px;
        background:blue;
        i {
             opacity: 0;
        }
        .main-ico {
            width:16px;
            height:16px;
            background:red;
        }
    }
}
.more-icons {
    float: left;
    height: 16px;
    padding-right: 8px;
    opacity: 0;
    z-index: -10;
    a {
        display: block;
        float: left;
        height: 14px;
        width: 14px;
        text-align: center;
        margin: 2px 8px;
        z-index: -1;
    }
    i {
        display: block;
    }
    .icon-1 {
      width:16px;
      height: 16px;
      background:red;
    }
    .icon-2 {
      width:16px;
      height: 16px;
      background:blue;
    }
    .icon-3 {
      width:16px;
      height: 16px;
      background:green;
    }
}

＆＃13;

＆＃13;

.icon-line {
  float: left; }
  .icon-line a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative; }
    .icon-line:hover .h-icon i {
      opacity: 1; }
      .icon-line:hover .h-icon ~ .more-icons {
        opacity: inherit; }

.h-icon i {
  display: block; }
  .h-icon.test {
    float: right;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: blue; }
    .h-icon.test i {
      opacity: 0; }
      .h-icon.test .main-ico {
        width: 16px;
        height: 16px;
        background: red; }

.more-icons {
  float: left;
  height: 16px;
  padding-right: 8px;
  opacity: 0;
  z-index: -10; }
  .more-icons a {
    display: block;
    float: left;
    height: 14px;
    width: 14px;
    text-align: center;
    margin: 2px 8px;
    z-index: -1; }
    .more-icons i {
      display: block; }
      .more-icons .icon-1 {
        width: 16px;
        height: 16px;
        background: red; }
        .more-icons .icon-2 {
          width: 16px;
          height: 16px;
          background: blue; }
          .more-icons .icon-3 {
            width: 16px;
            height: 16px;
            background: green; }

＆＃13;

<div class="icon-line">
		<div class="h-icon test">
			<a href="#">
				<i class="main-ico"></i>
			</a>
		</div><!-- .s-icon -->
		<div class="more-icons">
			<a href="#">
				<i class="icon-1"></i>
			</a>
			<a href="#">
				<i class="icon-2"></i>
			</a>
			<a href="#">
				<i class="icon-3"></i>
			</a>
		</div>
		
	</div>

＆＃13;

＆＃13;

＆＃13;