Question

我试图用css在tag hove上显示div。由于某种原因，它不起作用。

这是我的代码：

<style>
.div-to-display {
    background: yellow;
    position: absolute;
    display: none;
    z-index: 10;
    width: 150px;
    min-height: 50px;
    color: black;
}
.det1 {
    color: blue;
}
.det1:hover > .div-to-display {
    display: block
}
</style>


<td>
    <a class='det1'>link</a>
    <div class='div-to-diplay'></div>
</td>

当我替换它时：

.det1:hover > .div-to-display {
    display: block
}

用这个：

td:hover > .div-to-display {
    display: block
}

它以这种方式工作，但我需要它与<a>标签一起使用。

任何帮助？谢谢！

Answer 1

.det1:hover + .div-to-display {
    display: block
}

将在选择下一个相邻元素时起作用

http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

Answer 2

您的代码存在问题 - ＆gt;＆＃39; div-to-siplay＆＃39;而是div-to-display

Check

HTML

 <table>
     <tr>
        <td>
            <a class='det1'>link</a>
            <div class='div-to-display' id="id1" >Conternt</div>
          </td>
        </tr>
    </table>

的CSS

.div-to-display {
    background: yellow;
    position: absolute;
    display: none;
    z-index: 10;
    width: 150px;
    min-height: 50px;
    color: black;
}
.det1 {
    color: blue;
}
.det1:hover + .div-to-display {
    display: block;
}

Answer 3

你可以将它作为你的CSS。

a:hover{
(put styles here)
}

当然你也可以使用伪元素： a:link（默认），a:visited（之前已访问过），a:focus（有焦点）和a:active（当前鼠标正在按下。）

您可以使用子选择器使其仅适用于您选择的类/ ID。

Answer 4

你去了：

<style>
.div-to-display {
    background: yellow;
    position: absolute;
    display: none;
    z-index: 10;
    width: 150px;
    min-height: 50px;
    color: black;
}
.det1 {
    color: blue;
}
.det1:hover ~ .div-to-display {
    display: block !important;
}
</style>


<td>
    <a class='det1'>link</a>
    <div class='div-to-display'></div>
</td>

或仔细看看：

.det1:hover + .div-to-display {
    display: block !important;
}

加号意味着.det:hover并且紧随其后.div-to-display

CSS悬停不与<a> tag</a>一起使用

4 个答案:

HTML

的CSS