如何在鼠标悬停时显示/隐藏div？
在鼠标悬停时显示/隐藏div，可以使用CSS的伪类选择器:hover。以下是一个简单的示例：
HTML代码：
<!DOCTYPE html>
<html>
<head><style>
.box {
display: none;
width: 100px;
height: 100px;
background-color: red;
}
.container:hover .box {
display: block;
}
</style>
</head>
<body>
<div class="container">
<p>将鼠标悬停在这里</p>
<div class="box"></div>
</div>
</body>
</html>在这个示例中，我们创建了一个名为.box的div，它的初始状态是隐藏的（display: none）。然后我们使用.container:hover .box选择器，当鼠标悬停在.container元素上时，.box元素的display属性变为block，从而显示出来。
这个示例仅仅是一个简单的展示，实际应用中可以根据需求进行更多的样式和动画效果的设置。
相关·内容
2回答
如何在量角器中点击隐藏元素？
、、、、
我有一个元素，只有当我将鼠标悬停在它上面时，它才可见。
我编写了以下代码，以便将元素悬停在面板上，以使元素可见。
ptor.actions().
mouseMove(ptor.findElement(protractor.By.xpath('//*[@id="productapp"]/div/div/div[2]/div/div/div/div[2]/div/div/div/div[4]/table/thead/tr/th[2]'))).
perform();
ptor.element.all(by
浏览 1提问于2014-03-08得票数 11
回答已采纳
1回答
我有个问题。我希望你能帮助我。
我有一个列表，上面有人物的图片。在鼠标悬停时，将显示包含更多信息的div。在列表中，名称将突出显示。
现在我的问题来了。单击图像时，应该会显示包含更多信息的div，而不是消失。
列表中的名字也是如此。鼠标悬停时，将显示更多信息div。单击后，应该会出现div。
鼠标悬停效果起作用。但是我不能实现点击效果。
[Here is a shortened example][1]
我想你可以在睡梦中做到这一点。
谢谢凯
浏览 1提问于2013-09-20得票数 0
1回答
我有一个元素，当它旁边的另一个元素悬停在上面时，它的宽度会增加，即
.div2 {
width: 0px;
display: none;
transition: width 2s;
}
.div1:hover ~ .div2 {
width: 100px;
}
我想要在鼠标悬停时更改显示，但在CSS转换之前。然后，类似地，我想在CSS转换完成后将显示改回none。我尝试使用.onmouseover将显示设置为block，但它在CSS转换之后设置了它。
有没有办法在CSS转换之前将显示设置为阻塞？
浏览 2提问于2020-03-05得票数 0
5回答
我想在div悬停上显示按钮。当我把鼠标悬停在div上，然后按钮显示，否则隐藏。
我在divbutton div的按钮。
html
<div class="divbutton">
<button type="button" style="display: none;">Hello</button>
</div>
当我将鼠标悬停在div上时，它应该显示出来，但我不知道该如何做。当我移除鼠标按钮时再次隐藏。谢谢。
浏览 5提问于2013-12-13得票数 8
回答已采纳
1回答
我想在鼠标悬停时显示数据，然而，我在jQuery方面很弱，我不知道如何在鼠标悬停时通过它来获取数据。到目前为止，这是我的函数：
function test_contact_group($id){
$results = $this
->Contact
->ContactsContactGroup
->find('all', array('conditions'=> array('ContactsContactGroup.contact_id'=>$id,)));
浏览 2提问于2013-03-07得票数 1
我有一个这种格式的表格。
<table>
<tr>
<td class="divOne">div one</td>
<td class="divOne">11111</td>
<td style="visibility:hidden" class="divOne">id1</td>
</tr>
<tr>
<td class="divOne"
浏览 0提问于2012-03-05得票数 11
回答已采纳
HTML
<div class="onediv"><a href="">text</a></div>
<div class="nextdiv">
<p>testing testing testing testing testing testing testing testingtesting.
</p>
</div>
CSS
.nextdiv{display: none;}
JQUERY
$( ".onediv a" ).hov
浏览 0提问于2016-05-12得票数 1
我想在悬停的div之上显示一个覆盖div，类似于IBM网站上的效果：
请看靠近页脚的3个盒子。将鼠标悬停在“让我们建造一个更智能的星球”框上即可查看效果。
浏览 1提问于2011-10-25得票数 4
如何在jQuery中制作类似这样的东西：
<div id="principal-id"></div> //这是显示的主体id
<div id="hover-id"></div> //当我将鼠标悬停在# hover -id上时，我希望#主体-id消失，并随<div id="this-id"></div>更改。但是，当我将光标放在#this-id上时，是否有一种方法可以停止更改，当光标移到外部时，是否会返回到正常状态？
我希望你能理解。
谢谢!
浏览 0提问于2011-01-16得票数 3
回答已采纳
在wordpress的mega菜单上，当鼠标悬停在链接上时，我希望在不同的div上显示产品图像。我使用的是ubermenu插件
我发现一个html+javascript代码可以很好地工作，但只有在页面上添加一个快捷代码(例如：)来植入ubermenu时才能正常工作。第二个菜单可以正常工作，但主菜单不行。
下面是我添加的代码：
到所有产品链接
<a href="https://my-product/" onmouseover="document.getElementById('image').src = 'my-image-1.jpg&#
浏览 10提问于2019-08-06得票数 2
3回答
我有一个链接，当用户将鼠标悬停在它上面时，它应该在链接下显示一个框(div)。盒子应该覆盖在它下面的任何东西上。我如何使用css或javascript来实现？
浏览 0提问于2010-10-07得票数 8
回答已采纳
3回答
我正在寻找一种方法来实现这一点的建议。假设有以下情况：
Div A(包含图像)
Div B(包含8个左右文本链接的水平列表)
Div C(包含文本)
当滚动到Div B中的任何链接时，我如何让Div A和Div C将各自的内容交换为与该链接的内容相对应的不同内容？
例如，如果要将鼠标悬停在名为“dog”的Div B链接上，则在该鼠标悬停时，Div A将替换其内容并显示狗的图像，而Div C将替换其内容并显示有关狗的文本。
在该链接上滚动之后，新的Div A和Div C内容将保持不变，直到新的链接被滚动为止。
我希望这是有意义的。有没有人有关于实现这一点的最佳方法的建议？
浏览 0提问于2009-09-23得票数 1
回答已采纳
我写了一个Javascript函数，当你将鼠标悬停在div上时，它会显示文本。我这样做只是在听mouseover事件。当我的鼠标悬停在div上时，文本确实会出现，但当鼠标悬停在该div中新出现的文本上时，文本会闪烁。
如何才能阻止此文本闪烁？其他一切都很好。
document.getElementById("box1").addEventListener("mouseover", mouseOver);
document.getElementById("box1").addEventListener("mouseout", mou
浏览 0提问于2019-04-04得票数 2
1回答
我有两个div元素，一个表示帖子(状态帖子)，另一个表示删除帖子的删除按钮。删除按钮应仅在代表帖子的div-element的鼠标悬停事件上显示。它也应该在删除按钮本身的鼠标悬停事件上显示，因为它位于帖子中。
document.getElementById('statusPost').addEventListener('mouseover', function(event){
var deleteButton = document.createElement('div');
deleteButton.id = 'deleteBu
浏览 0提问于2010-10-06得票数 0
回答已采纳
我有一个导航，它通过css隐藏在视口之外，并通过:hover伪类显示在包含li的光标上。下面是标记和css。
ul li div#someid{position:absolute;left:-9999px;opacity:0;}
ul li:hover div#someid { left:0;opacity:1;z-index:9000;}
<ul>
<li>
<div>The Content to Hide <a href="#runAjax">Click Me</a></div&
浏览 1提问于2011-07-20得票数 0
回答已采纳
当我将鼠标悬停在图库中的div元素(图像或文件名)上时，我试图在div中显示exif信息。在图库之外做这件事很容易，但是当我尝试使用图库的div元素来做这件事时，什么也没有发生，因为内容是通过jquery.galleriffic.js动态提供的。
当你将鼠标移到图片上时，你可以在这里看到效果：
我有exif信息显示在数据库中，所以我只需要知道当悬停在图像上时如何显示/隐藏div。反复试验会花我一段时间，所以如果你是专家，我会很感激一些关于在哪里放置.bind的建议。jquery.galleriffic.js中的语句
这是一个类似的问题，但问题没有得到解决：
浏览 3提问于2013-02-11得票数 0
2回答
我有一个ul列表，每个li都是这样构造的：
<li class="A">list-item
<div>1</div>
<div class="B">2
<div class="C">3</div>
</div>
</li>
其中类为.C的div具有CSS属性display:none;
我想在li hover上显示隐藏的div，但我希望它只在活动的li项上显示。因此，当我将鼠标悬停在li项上时，它只显示列表项隐藏的div。
浏览 0提问于2013-04-29得票数 0
回答已采纳
我有一个菜单，当我悬停其中一个链接时，div会显示出来。我希望用户能够将鼠标悬停在此div上，但当用户将鼠标悬停在div之外时(我想它被称为鼠标输出)，我希望它隐藏起来。
想象一下css中的一个下拉菜单，用户将鼠标悬停在链接上，然后显示子导航，当用户将鼠标悬停在链接外或远离链接时，子导航消失。如何使用jquery完成此操作？
这就是我所拥有的：
$(document).ready(function(){
//when user hovers over plans the mainnavbottom is shown
$(".plans").hover(
functi
浏览 3提问于2010-06-11得票数 0
回答已采纳
2回答
我正在尝试为我正在工作的网站创建一个下拉菜单。它应该是简单的编码，因为它是在Html和CSS上，但我所做的不工作。当我将鼠标悬停在应该激活下拉菜单的文本上时，它根本不会显示出来。 HTML <div class="dropdown-menu" id=" el_pepe">
<ul class="nav navbar-nav">
<li> @Html.ActionLink("maderas", "Productos", "tblProductos")
浏览 16提问于2021-07-20得票数 0
我有一个div列表(简化的例子)
<div class="title">text</div>
<div class="description">text</div>
<div class="title">text</div>
<div class="description">text</div>
<div class="title">text</div>
<div class="de
浏览 1提问于2010-09-28得票数 1
回答已采纳
2回答
有人知道如何在将鼠标悬停在另一个元素上时(平滑地)显示div吗？例如，将鼠标悬停在“新闻”链接上，然后带有新闻的div将在鼠标移开时出现和消失。
我猜我会用jQuery来解决这个问题，但是有谁有什么建议可以从哪里开始呢？
浏览 0提问于2012-03-05得票数 0
回答已采纳
2回答
我的PHP：
<?php
foreach ($query as $row){
echo '<tr>
<td>
<label class="checkbox">
'.form_checkbox('delete[]', $row['link']).anchor("site/see_art/".$row['article_id'],$row['title
浏览 0提问于2014-03-27得票数 0
3回答
我想在鼠标悬停时显示按钮，并在鼠标移出时隐藏它们，我尝试了以下代码，但不起作用。
<div class="mybooks">
<div class="divbutton">
<input class="btnsubmit" type="button" value="Edit" id="edit_trivia">
<input class="btnsubmit" type="butto
浏览 0提问于2014-01-20得票数 0
3回答
下面的代码似乎不能正常工作。
$("ul li a").live("click", function() {
$(".myMegaMenuDiv").addClass('hideit').delay(300).removeClass('hideit');
});
我有一个超大的菜单，所以当你将鼠标悬停在菜单项上时，它会显示一个div ".myMegaMenuDiv“。但当我单击该div中的一个链接时，我希望它消失，就像目前它不会消失一样。我希望上面的代码能解决这个问题。
"hide
浏览 0提问于2013-04-24得票数 1
回答已采纳
13回答
我有这个html代码
<div id="mybox"> aaaaaaa </div>
这是我的css
#mybox{
background-color:green;
}
#mybox:hover{
background-color:red;
}
问题是如何在鼠标悬停事件时隐藏div (aaaaaaa)的内容，只使用css，而不改变代码结构。我认为我应该将一些代码放在#mybox:hover下，但我不知道代码
提前感谢您的帮助
浏览 0提问于2009-04-21得票数 26
回答已采纳
我正在尝试解决当鼠标悬停在一个div上时如何显示更多的div。
我知道当鼠标悬停在同一个div上时如何显示它的变化，但是当我悬停在一个div上时如何才能显示更多的div呢？
以此为例：
当您将鼠标悬停在该框上时，如何才能使其旁边出现另一个框？
我不确定这是否可以用css或需要javascript来完成？
谢谢!
詹姆斯
浏览 0提问于2011-11-16得票数 0
回答已采纳
我有两个彼此靠近的divs。当我将鼠标悬停在div 1上时，显示的是div 2。
如果我不将鼠标悬停在div 2上，它应该会淡出。或者，如果我将鼠标从div one移动到其他地方，那么div two也应该会淡出。
$(".one").mouseover(function () {
$(".two").show();
});
$(".two").mouseleave(function () {
$(".two").fadeOut(1);
});
浏览 0提问于2015-05-12得票数 0
1回答
我正在使用BlueImp图库将灯箱添加到我的图片库。所以，我想在鼠标悬停时在图像的左上角显示一个复选框，当我选中复选框时，它应该总是显示在图像上。
<div id="links">
@foreach (var images in Model)
{
<a href="@Url.Content("~/ImageGallery/" + images.Imgs)" data-gallery>
<img src="@Url.Content("~/Image
浏览 2提问于2014-05-14得票数 1
我希望当鼠标悬停在(li.title)上时，然后用jquery显示下一个(div.content)。我测试了一些代码，但当鼠标悬停在标题上时，只显示一个内容。
现在我能做什么呢？
我的Html代码
<div class="posts">
<li class="title">
<a href="#">Title post</a>
</li>
<div class="content">
Content
</div>
</div>
&
浏览 1提问于2014-10-25得票数 1
我对jquery这个奇迹非常陌生。
我只是想出如何让我的img按钮显示/隐藏与不透明度差异(如此)。
<script type="text/javascript">
<
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
