Question

我有以下 HTML

<table style="position:relative; left: 10px; top:5px;">
            <tr id="all_extended">
                <td id="pucenas">
                    <img id="cenas"></img>
                </td>
                <td id="slide">
                    <div id="slider">
                    </div>
                </td>
            </tr>
    </table>

和 CSS

#slide{
  height:100%;
  border: none;
  padding-left:20px;
  display:none;
}

#slider{
  border: none;
  padding-left:30px;
  background-color:green;
  position:relative;
  height:100%;
  opacity:0;
  width:0px;
  overflow:hidden;

  transition: width 10s linear 2s;
  /* safari is webkit */
  -webkit-transition:width 1s linear 2s;
    transition: opacity 10s linear 2s;
  /* safari is webkit */
  -webkit-transition:opacity 1s linear 2s;
}

#cenas{
    width:99%;
    height:100%;
    border: solid black 1px;
    position:relative;
    left: 0%;
}

#pucenas{
  font-size: 0;
  width:100px;
  height:100px;
  position:relative;
  border: solid black 1px;
  margin: 0px;
  padding: 0px;
  cursor:pointer;
}

#all_extended:hover #slide{
    width: 200px;
    display:inline;
}

我真正想要的是在#all_extended上悬停时出现绿色的东西（#slide和#slider）。我已经尝试了很多次但是却无法让它工作（我在jquery上有它）。这是关于我真正想要的http://awwapp.com/s/99/5e/21.png的草图。关于这个的任何想法？非常感谢你！

Answer 1

如果你想悬停在带有黑色边框的盒子上并显示绿色框，那么你可以这样做：

#pucenas:hover + #slide {
  display: table-cell;
}

Here's an example

使用纯css在悬停div上显示绿色选项卡

1 个答案: