HTML 和 CSS 中的悬停问题答案

【问题标题】：Issues with hover in HTML and CSSHTML 和 CSS 中的悬停问题
【发布时间】：2013-08-26 16:38:58
【问题描述】：

我对一些 HTML 和 CSS 有一些麻烦。当我将鼠标悬停在页脚中的某些文本上时，我希望显示一些内容。内容应该填满屏幕的整个高度，因此它不能在同一个容器中。

HTML

<div><a class ="per">Hover over me!</a></div>
<div class="sten">Stuff shown on hover</div>

CSS

.sten {display: none;}
.per:hover + .sten{display: block;}

当我需要悬停的文本在另一个 div 中时，有什么办法可以解决这个问题？

【问题讨论】：

+ 是相邻同级选择器，.sten 不是链接的同级，而是链接父级的同级。
我在这里没有看到任何 HTML5
你想要这样吗？ jsfiddle.net/3dPVF

标签： css class html nested

【解决方案1】：

将您的代码更改为：

<div class ="per"><a>Hover over me!</a></div>
<div class="sten">Stuff shown on hover</div>

如果你想使用相同的 css：

.sten {display: none;}
.per:hover + .sten{display: block;}

演示：http://jsfiddle.net/mwNFD/1/

或者像这样使用输入和标签方法：

<div  class ="per"><label for=hover><a>Hover over me!</a></label></div>
<input id=hover type="checkbox" checked="checked">
<div class="sten">Stuff shown on hover</div>

CSS

.sten {display: none;}
#hover{opacity:0;}
#hover:hover + .sten{display: block;}

演示：http://jsfiddle.net/mwNFD/2/

【讨论】：

如果链接是.per中唯一的东西，这只会按预期工作
然后使用输入和标签方法，因为您尝试做的是带有父选择器的 css 级别 4
这对我有用，因为我可能过于简化了这个问题。
很好 :-) 很高兴知道它对您有帮助

【解决方案2】：

试试这个：

.sten {
    display: none;
}
div:hover + div.sten {
    display: block;
}

上面的代码将寻找一个相邻的兄弟，它是一个 div 并且具有类sten。如果没有这样的相邻元素，那么它什么也不做。

Working Fiddle

【讨论】：

如果链接是.per中唯一的东西，这只会按预期工作
@koala_dev 适用于 OP。我不确定你在假设什么。 :)
它可以工作，但它有点像黑客，因为它不是链接的悬停触发元素的显示，如果预期的行为是显示，悬停容器 div 的任何部分都会触发它只有将鼠标悬停在链接中，才会出现一些问题，在您的小提琴中，您可以通过将鼠标悬停在文档的右上角来显示内容

【解决方案3】：

像这样更改您的代码：

<div><a class ="per">Hover over me!</a>
<div class="sten">Stuff shown on hover</div>
</div>

Demo

【讨论】：

再读一遍“内容将填满屏幕的整个高度，因此不能在同一个容器中”

【解决方案4】：

使用 jquery

$(document).ready(function()
{
$(".pass").hover(
  function () {
     $(".change").text("MOUSE HOVER");
    },
    function () {
     $(".change").text("DIV TO CHANGE");
    }
    );
});

demo这里

【讨论】：