Question

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

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中时，有没有办法解决这个问题？

Answer 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/

Answer 2

试试这个：

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

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

Working Fiddle

Answer 3

更改您的代码：

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

<强> Demo

Answer 4

使用jquery

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

demo此处

悬停在HTML和CSS中的问题

4 个答案: