当我将鼠标悬停在div上时，我希望它根据所悬停的第n个子元素的编号来更改它旁边的元素
当您将鼠标悬停在div上时，希望根据所悬停的第n个子元素的编号来更改它旁边的元素，您可以通过使用JavaScript来实现这个功能。以下是一个可能的解决方案：
- 首先，您需要给每个子元素添加一个事件监听器，以便在鼠标悬停时触发相应的操作。您可以使用addEventListener方法来实现这一点。
- 在事件监听器中，您可以使用event对象来获取鼠标悬停的子元素的编号。可以使用event.target属性来获取当前触发事件的元素。
- 一旦您获取到子元素的编号，您可以使用JavaScript来更改div旁边的元素。您可以通过修改元素的样式、内容或其他属性来实现这一点。
以下是一个示例代码，演示了如何实现这个功能：
<!DOCTYPE html>
<html>
<head>
<style>
.div-container {
display: flex;
}
.div-container div {
width: 100px;
height: 100px;
border: 1px solid black;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="div-container">
<div id="child-1">Child 1</div>
<div id="child-2">Child 2</div>
<div id="child-3">Child 3</div>
</div>
<script>
var divContainer = document.querySelector('.div-container');
var divs = divContainer.querySelectorAll('div');
divs.forEach(function(div) {
div.addEventListener('mouseover', function(event) {
var hoveredElement = event.target;
var childNumber = Array.from(divContainer.children).indexOf(hoveredElement) + 1;
// 根据子元素的编号来更改div旁边的元素
var nextElement = div.nextElementSibling;
if (nextElement) {
nextElement.textContent = 'Hovered Child ' + childNumber;
}
});
});
</script>
</body>
</html>在上面的示例中，我们使用了Flex布局来排列div元素，并为每个子元素添加了一个唯一的id。当鼠标悬停在子元素上时，我们获取到子元素的编号，并将其显示在下一个相邻的元素中。
请注意，这只是一个示例代码，您可以根据您的具体需求进行修改和扩展。此外，根据您的具体应用场景，您可能需要使用其他技术或框架来实现更复杂的功能。
相关·内容
我有一个ul，里面有多个li，每个li里面都有一个div。;<div class="line"> <li> <a href="#">...........</p>
</d
浏览 7提问于2020-05-18得票数 0
回答已采纳
1回答
我希望悬停在父元素上，并让它更改所有子元素的CSS。我以为这会很简单。说起来很简单：}
将鼠标悬停在该元素上时，您可以确定要影响哪些元素。我希望所有的孩子都受到影响，但我不知道我做错了什么。下面是一个快速
浏览 2提问于2013-02-07得票数 1
回答已采纳
2回答
如何在量角器中点击隐藏元素？
、、、、
我有一个元素，只有当我将鼠标悬停在它上面时，它才可见。ptor.actions().mouseMove(ptor.findElement(protractor.By.xpath('//*[@id="productapp"]/<e
浏览 1提问于2014-03-08得票数 11
回答已采纳
2回答
我正在开发一个web应用程序，它会问10个问题，每个问题都有3个可能的答案。对于每个答案，我需要的是一个工具提示或弹出窗口，显示每个答案的方向。到目前为止，我已经尝试过使用工具提示和弹出窗口，但在显示提示时，需要单击两次才能完成操作。我可以在一次点击中完成此操作，因为我需要最小化屏幕上的点击次数。
浏览 0提问于2015-08-01得票数 0
5回答
当悬停在一个元素上时，我正在尝试更改另一个元素的属性。在这种情况下，它在我的导航中。我有一个子菜单，它的.class为.sub-menu
当我将鼠标悬停在子菜单上时，我希望该元素的父级<
浏览 0提问于2014-01-28得票数 1
3回答
图像上的悬停效果
、、
我想知道为什么我的悬停效果不起作用。现在我有一个图像，当我将光标移动到它上面时，我想要像这样的东西。当然，我已经为这个效果写了代码，但它在悬停效果上不起作用。你能给我解释一下我做错了什么吗？如您所见，我已经尝试使用display:none，然后使用display:block，但是没有发生任何事情。如果能帮上忙，我会非
浏览 3提问于2016-11-30得票数 0
2回答
当图片被悬停在上面时，我试图让文本显示在图片的下方，但无法获得正确的语法。我开始学习CSS，所以我可能没有遵循最佳实践，请指出我如何更好地解决我的问题！<div class="X"> <a href="XYZ">
<s
浏览 3提问于2014-10-23得票数 0
当我将鼠标悬停在父div中的div上时，有没有办法隐藏它。<div class="parent" style="width:500px; height:800px;">
<div class="child" style="width:250px; height:250px; margin:250px auto 0
浏览 2提问于2014-07-02得票数 1
我有一个带有几个<li>元素的<ul>。在<li>元素中，有一个默认情况下隐藏的大型<div>。当我将鼠标悬停在<li>上时，它的背景会改变颜色，底部边框也会改变，<div>的显示也会改变。这是预期的行为。请注意，
浏览 4提问于2013-08-02得票数 3
回答已采纳
在鼠标悬停时，我调用了我创建的一个函数，该函数创建了一个包含图像的div元素。我将(this)作为参数传递给函数。函数起作用了，在鼠标经过时，它创建了一个子元素，我可以点击它。但是，如果我在div之外添加鼠标来删除它自己，
浏览 2提问于2014-11-13得票数 0
1回答
我有一个元素，当它旁边的另一个元素悬停在上面时，它的宽度会增加，即 width: 0px; transition: width 2s; width: 100px;我想要在鼠标悬停时更改<
浏览 2提问于2020-03-05得票数 0
我知道不存在，但在没有这样的选择器的情况下，是否可以在悬停一个子元素时设置父元素的样式？举个例子:考虑一个delete按钮，当悬停该按钮时，将突出显示即将被删除的元素： <p>Lorem ipsum ...</p>
<button&
浏览 171提问于2011-11-14得票数 184
回答已采纳
3回答
我是一个完全的ASP.NET初学者，需要知道如何创建如下网站中的悬停效果：
我只需要一个想法，像我搜索什么？..what所有的代码我需要包括在我的网页？？
请帮帮忙？谢谢
浏览 7提问于2010-08-16得票数 2
回答已采纳
4回答
为什么循环不起作用？
、、、
我试着把它分成3个子集，比如"100“、"200”、"300“、"400”、"500“。我希望它们按顺序作为子元素的鼠标悬停在标题/工具提示上。也就是说，当您将鼠标悬停在第一个子对象上时，工具提示应该显示为100，当您将鼠标悬停在第二个子对象上
浏览 0提问于2015-01-04得票数 0
我正在使用一个允许用户使用css更改元素设置的平台，我试图在将鼠标悬停在"li“上时更改"a”的颜色，但"a“的颜色没有更改，我应该如何解决这个问题？我知道如果我将鼠标悬停在它上面，我可以改变
浏览 0提问于2015-07-31得票数 3
2回答
当鼠标悬停在html中时，我想要显示一个文本。现在我是这样想的： echo "<td onmouseover='' style='cursor: pointer; background-color:#ffeb3b' title=$text id=$text></td>"; 问题是它看起来很小，而且没有设计。我怎么才能让它看起来更大一点呢？ 我</em
浏览 26提问于2021-01-20得票数 2
回答已采纳
3回答
我在一个Angular 2应用的HTML模板中有一个元素。我给它添加了一条指令：我希望每当我将鼠标悬停在div上时，div中的文本都应该被更改，但这需要在Directiv
浏览 2提问于2016-06-22得票数 36
回答已采纳
我正在尝试使用css悬停，并通过执行以下操作使其在div上工作：background-position:192px 35px;color:#ffffff;我的问题是，当我将<e
浏览 0提问于2011-01-05得票数 1
回答已采纳
1回答
我想在悬停模块后换行div，以便在0.3上设置other的不透明度，并且只显示悬停的div。我在我的css中做了一些类似的事情： 我有类似的东西： .wrap:hover .module-wrap:not(:hover) {}
</d
浏览 8提问于2020-12-11得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
