Question

我想悬停显示一些项目而不移动以下内容。我的代码如下：

<ul id="try" >
    <li>
      <img class="flame" src="https://vignette4.wikia.nocookie.net/knightsanddragons/images/f/fa/Dragons-flame.png/revision/latest/scale-to-width-down/100?cb=20160727135656"/>
      <ul>
      <li class="one"><span>one  </span></li>
      <li class="two"><span>two  </span></li>
      </ul>
    </li>
</ul>
 <span>three</span>

和悬停的css：

ul#try li {display: inline-block;background: transparent;}
ul#try li:hover {background: transparent;}
ul#try li:hover ul {display: block;background: transparent;}
ul#try li ul {
  display: none;
}
ul#try li ul li { 
  display: block; 
  background: transparent;
}

我希望在不移动<span>three</span>

的情况下显示值1和2

Answer 1

将ul#try li ul设为position: absolute。绝对定位会从布局流中移除元素，并防止其更改其他元素位置。

＆＃13;

ul#try li {
  display: inline-block;
  position: relative;
  background: transparent;
}

ul#try li:hover {
  background: transparent;
}

ul#try li:hover ul {
  display: block;
  background: transparent;
}

ul#try li ul {
  display: none;
  position: absolute;
}

ul#try li ul li {
  display: block;
  background: transparent;
}

＆＃13;

<ul id="try">
  <li>
    <img class="flame" src="https://vignette4.wikia.nocookie.net/knightsanddragons/images/f/fa/Dragons-flame.png/revision/latest/scale-to-width-down/100?cb=20160727135656" />
    <ul>
      <li class="one"><span>one  </span></li>
      <li class="two"><span>two  </span></li>
    </ul>
  </li>
</ul>
<span>three</span>

＆＃13;

悬停而不移动以下内容

1 个答案: