Question

所以标题很奇怪，所以我会尽力解释自己。

我想使用:hover。我正在尝试构建其中一个文本和图片的幻灯片，当您悬停文本时，会显示更多文本，第一个文本会显示出来。

现在出现问题：

我希望将:hover引用到上部div，就像悬停其中一个子文本/ ID一样。我想改变＆＃34; ShortText＆＃34; property（删除文本留下的背景）
当我使用它时，文本变得有点跳跃，因为我改变文本位置并使其更高，所以当试图将鼠标移动到div（它有背景，所以我可以区域）时，所有文本都会上下跳动。 / LI>
当悬停时，我想要背景下去文本上升的数量试图使用填充/边距，但它移动了需要显示的文本。我认为这与2号有关，但我不确定

希望我很清楚，我的代码显示了我想要做的事情我需要更改它，因为该网站将采用不同的语言。

如果需要，我会按原样复制代码。尝试上传网站，以便您能够看到它。

如果需要，可以使用Jquery / JS

＆＃13;

#ShortText {
  position:absolute;
  background-color: rgba(255, 255, 255,.6);
}

#FirstSecond,#SecondSecond,#ThirdSecond {
  display:none;
  position:absolute;
}

#FirstMain:hover {
  position:relative;
  top:-200px;
  background-color: rgba(255, 255, 255,.6);
  padding-bottom:200px
}

#FirstMain:hover + #FirstSecond {
  position:relative;
  top:-300px;
  display:inline-block;
  background-size:auto;
  background-color: rgba(255, 255, 255,.6);
}

＆＃13;

<div id="ShortText">
  <div><!--This is a test to see if i use id on the div it work-->
    <h1 id="FirstMain" >First</h1>
    <p id="FirstSecond">Hoverd</p>
  </div>
  <div >
    <h1 id="SecondMain">Second</h1>
    <p id="SecondSecond">Hoverd</p>
  </div>
  <div >
    <h1 id="ThirdMain">Third</h1>
    <p id="ThirdSecond">Hoverd</p>
  </div>
</div>

＆＃13;

JSfiddle

：在区域上悬停事件并更改上部div

0 个答案: