1

我对一些 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 中时，有什么办法可以解决这个问题？

4

4 回答 4

2

将您的代码更改为：

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

于 2013-08-26T16:44:29.187 回答
2

尝试这个：

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

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

工作小提琴

于 2013-08-26T16:49:12.090 回答
1

像这样更改您的代码：

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

演示

于 2013-08-26T16:43:21.223 回答
1

使用 jQuery

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

演示在这里

于 2013-08-26T16:56:17.103 回答