Question

我是JS的新手，我只是想在使用CSS3之外学习真正具体的新功能。我想学习如何使用悬停来显示一个h1元素，该元素当前是div中隐藏的子元素。

这是我的标记：

HTML

<div class="box">
  <h1>Project X</h1>
  <img src="img/concrete.png" />
</div>

CSS

.box h1 { display:none;

JS

$(document).ready(function() {
    $(".box").hover(function(){
        var ind = $(this).text();
        $("h1").text(ind)
    });
});

Answer 1

您的CSS没有任何意义......您的HTML代码中没有<p>标记。

听起来这就是你需要的：但是，我不确定当用户不再将鼠标悬停在它上面时是否要隐藏它。

HTML

<div class="box">
  <h1>Project X</h1>
  <img src="img/concrete.png" />
</div>

CSS

.box h1 { display: none}

JQuery的

$(document).ready(function() {
    $(".box").hover(function(){
        $('.h1').show();
    });
});

如果您希望在鼠标不再悬停在div上时隐藏它，则需要使用mouseover和mouseout功能

$(document).ready(function() {
    $(".box").mouseover(function(){
        $('.h1').show();
    });
    $(".box").mouseout(function(){
        $('.h1').hide();
    });
});

Answer 2

您可以使用.css()更改元素的属性。例如：

HTML

<div class="box">
  <p>Here it is</p>  
  <h1>Project X</h1>
</div>

CSS

.box h1 { display:none; }

jQuery

$(document).ready(function() {
  $(".box").hover(function(){
    var ind = $(this).text();
    $(this).find("h1").css("display", "block");
  });
});

fiddle。

这是矫枉过正

使用纯CSS可以实现同样的目标：

HTML

<div class="box">
  <p>Here it is</p>  
  <h1>Project X</h1>
</div>

CSS

.box h1 { display:none; }
.box:hover > h1 { display:block; }

fiddle。

Answer 3

您可以使用鼠标输入和鼠标离开事件

$(".box").mouseenter(function(){
    $(this).find('h1').show();
});

$(".box").mousleaver(function(){
    $(this).find('h1').hide();
});

Answer 4

最灵活的方法是在你要隐藏的任何内容上设置一个“状态”CSS类，换句话说就是......

.hide { display: none; }

因此，对于您想隐藏/显示的任何段落，请按以下方式启动：

<p class="hide">some text</p>

然后定义两个回调，一个用于处理悬停并像这样悬停：

$(".box").hover(function(){
    var $paragraphs = $("p");
    $paragraphs.removeClass("hide");
}, function() {
    var $paragraphs = $("p");
    $paragraphs.addClass("hide");
});

查看我的simple fiddle for this。请注意，我建议使用此方法，因为只需添加hide类而不是仅仅为了隐藏特定元素而创建新的CSS规则，就可以轻松扩展到更多对象。

希望这有帮助！

使用悬停显示元素内的p标记

4 个答案:

HTML

CSS

JQuery的