Question

我有以下代码：

    <div id="div3"><img src="" width="20px" /></div>
    <div id="div4">
    ... -> menu
    </div>

通过使用以下内容：

    div3{
    position: absolute;
    width: 20px;
    height: 20px;
    left: 50%;
    top: 50%;
    margin-top: -10px;
    margin-left: -10px;
    }


    #div4{
    display: none;
    float:right;
    position: absolute;
    left: 60%;
    top: 50%;
    margin-top: -15px;
    margin-left: -70px;
    }

    #div3:hover + #div4 {
    display: block;
    }

在将＃div3（这是一张图片）悬停后，我制作了div4节目。但是我希望div4出现并在发现#div3后仍然存在。我在jquery中尝试了几个代码但它们不起作用。

你可以帮忙吗？

Answer 1

正如PHPGlue所说，你不能只用CSS做到这一点。

你可以使用jquery做这样的事情，根据你的需要调整代码：

<强> HTML

<div id="one">Hover me!</div>
<div id="two">HELLOO!</div>

<强> JS

$("#one").on("hover", function(){
   $("#two").show(); 
});

<强> FIDDLE

Answer 2

你可以（有效地）在纯CSS中执行此操作，以便它可以在现代浏览器中使用。诀窍是在悬停退出时为转换延迟使用非常大的值。像这样：

#div3:hover + #div4 { opacity:1; height:20px;transition-delay:0s; }
#div4 { opacity:0; height:0; transition-delay:360000s; }

请参阅http://jsfiddle.net/7Fw3A/1/

Answer 3

确保#div4在悬停时始终显示。将您的上一个CSS选择器更改为：

#div3:hover + #div4, #div4:hover {
    display: block;
}

当你将鼠标从div3和div4移开时它仍会消失，但这通常是你想要发生的事情。如果没有，最好使用jQuery解决方案（我相信其他人会发布一个）。

你可以添加另一个覆盖页面整个高度和宽度的透明div，给它一个高z-index，并确保当div被悬停时显示它和div4（因为它总是be），但这听起来不错。

Answer 4

正如PHPglue所说，你需要Javascript才能做到这一点。（这只是一个例子。随意使用你想要的任何JS）

$('#div3').hover(function() {
    $('#div4').css('display', 'block');
}

Answer 5

我假设您希望在#div4上方悬停时显示#div3，请执行以下操作。

$('#div3').on('mouseover', function () {
  $('#div4').addClass('visible');
  $(this).off('mouseover');
});

当您第一次将visible鼠标悬停时，这会将课程#div4添加到#div3。如果你添加一个css选择器.visible { visibility: visible; }，那么这将调整#div4 sss。

永久显示隐藏的div

5 个答案: