关键词：
【中文标题】CSS - 将鼠标悬停在 li 元素上时执行转换（下拉菜单）【英文标题】：CSS - perform transition when hover over li element (dropdown menu) 【发布时间】：2013-07-30 14:57:45 【问题描述】：我正在制作这样的主页：http://jsbin.com/umaguc/1/，我目前正在处理下拉菜单。现在我想要的效果是：http://www.script-tutorials.com/demos/249/index.html;我有一个 div id="lavalamp"，它有宽度、高度和背景颜色（看起来像一个矩形）；当我 悬停 #nav ul li 元素之一（如主页、离线游戏、在线游戏、电子竞技、音乐...）时，我希望移动此 #lavalamp div 并更改其宽度，以便看起来就像我上面提到的效果。
这是我的代码的想法：
#nav li:nth-of-type(1):hover ~ #lavalamp
left: 39px;
#nav li:nth-of-type(2):hover ~ #lavalamp
left:110px;
width:110px;
但遗憾的是，它只是行不通。当我将鼠标悬停在 #nav ul li 元素上时，没有任何变化！希望你们能帮我解决这个问题.. 非常感谢！
【问题讨论】：
能把你用的html贴出来吗？ 对不起^^我刚刚更新了我在jsbin链接中使用的html和css。 检查script-tutorials.com/pure-css3-lavalamp-menu，就像 raddevon 说的那样，您的 lavalamp div 似乎不在应有的位置。 好的，我修好了，一切正常。非常感谢！ 【参考方案1】：您似乎使用了general sibling selector 来选择#lavalamp，但该元素从未作为li 元素的同级元素出现。
不幸的是，我不相信 CSS 有办法让您爬回 DOM 以从 lis 访问您的 #lavalamp。您可以使用 jQuery，或者您可以考虑重组标记的方法，使元素可以通过纯 CSS 访问。
【讨论】：
仅使用 CSS，将鼠标悬停在另一个元素上时显示 div
】仅使用CSS，将鼠标悬停在另一个元素上时显示div【英文标题】：UsingonlyCSS,showdivonhoveroveranotherelement【发布时间】：2011-07-0918:19:36【问题描述】：当有人将鼠标悬停在<a>元素上时，我想显示一个div，但我想在CSS而不是J... 查看详情
将鼠标悬停在 li 上时更改图像并使用 CSS 永久保存该图像
】将鼠标悬停在li上时更改图像并使用CSS永久保存该图像【英文标题】：ChangeimagewhenhoveringoverliandkeepthatimagepermanentusingCSS【发布时间】：2016-09-2210:05:42【问题描述】：对于我的生活，我无法弄清楚。本质上，有一个在页面访问时... 查看详情
通过 CSS 将鼠标悬停在父元素上时显示 :after
】通过CSS将鼠标悬停在父元素上时显示:after【英文标题】：Show:afterwhenhoveringovertheparentelementviaCSS【发布时间】：2013-03-0711:57:06【问题描述】：当我将鼠标悬停在父元素本身上时，是否可以display:block;:after伪元素？#myDivposition:relativ... 查看详情
使用 css 将鼠标悬停在第一个子元素上时更改其他子元素
】使用css将鼠标悬停在第一个子元素上时更改其他子元素【英文标题】：Changingotherchildelementswhenhoveringoverfirstchildusingcss【发布时间】：2013-02-0502:18:06【问题描述】：我试图在div的第一个孩子上使用悬停来影响第三个孩子。有谁知... 查看详情
将鼠标悬停在容器上时的 CSS 变换图像
】将鼠标悬停在容器上时的CSS变换图像【英文标题】：CSStransformimagewhenhoveroveracontainer【发布时间】：2011-09-3002:19:44【问题描述】：有没有办法使用CSS制作容器，例如：#p-container.p-categories-item影响该div中的图像？我在图像上有一... 查看详情
jQuery：将鼠标悬停在其上时保持切换的子元素打开
】jQuery：将鼠标悬停在其上时保持切换的子元素打开【英文标题】：jQuery:keeptoggledchildelementopenwhenhoveringoverit【发布时间】：2011-05-0213:41:03【问题描述】：我的问题类似，但与jquery-hover-menu-when-hovering-over-child-menu-disappears不同。我... 查看详情
将鼠标悬停在上下文菜单上时如何更改 li 项的颜色
】将鼠标悬停在上下文菜单上时如何更改li项的颜色【英文标题】：Howtochangethecolorofanliitemofthecontextmenu,whenhoveredoverit【发布时间】：2019-07-1915:45:38【问题描述】：我正在使用VueJS和Bootstrap开发一个应用程序。我使用称为vue-contextVue... 查看详情
将鼠标悬停在特定 <li> 上时如何更改 <ul> 背景图像？ [复制]
】将鼠标悬停在特定<li>上时如何更改<ul>背景图像？[复制]【英文标题】：Howtochange<ul>backgroundimagewhilehoveronaspecific<li>?[duplicate]【发布时间】：2021-01-1712:58:33【问题描述】：我知道\'li\'它是父\'ul\'的孩子，所以我... 查看详情
当用户将鼠标悬停在列表项上时，如何将光标变为手形？
】当用户将鼠标悬停在列表项上时，如何将光标变为手形？【英文标题】：Howtochangethecursorintoahandwhenauserhoversoveralistitem?【发布时间】：2011-03-0612:04:40【问题描述】：我有一个列表，并且我有一个用于其项目的点击处理程序：<u... 查看详情
jQuery CSS 悬停
...】：2010-12-1103:42:55【问题描述】：我有一个CSS菜单，当将鼠标悬停在父li上时，它会设置其颜色，它是子ul（子菜单）。基本上，当您将鼠标悬停在菜单上时，它会改变颜色并保持这种状态，直到您将鼠标悬停在菜单上并且它是... 查看详情
HTML/CSS - 将鼠标悬停在照片上时显示链接
】HTML/CSS-将鼠标悬停在照片上时显示链接【英文标题】：HTML/CSS-Displaythelinkwhilehoveringoveraphoto【发布时间】：2020-12-0416:15:49【问题描述】：我希望在将鼠标悬停在图像上时显示我的链接。我编写代码的方式仅在我将鼠标悬停在链... 查看详情
将鼠标悬停在列表上时更改列表中每个链接的颜色
】将鼠标悬停在列表上时更改列表中每个链接的颜色【英文标题】：changethecolorofaeverylinkinalistwhenhoveringoverone【发布时间】：2012-02-2214:27:22【问题描述】：这是一个示例列表：<ul><li><ahref="#">Link1</a></li><li&g... 查看详情
如何将鼠标悬停在子元素上而不悬停在 CSS 中的父元素上？
】如何将鼠标悬停在子元素上而不悬停在CSS中的父元素上？【英文标题】：HowdoIhoveroverachildelementwithouthoveringovertheparentinCSS?【发布时间】：2017-04-1909:59:51【问题描述】：是否可以将鼠标悬停在嵌套的子元素上而不触发父元素上的... 查看详情
当用户使用 JQuery 将鼠标悬停在链接上时如何显示图像
】当用户使用JQuery将鼠标悬停在链接上时如何显示图像【英文标题】：HowdoIdisplayanimagewhenauserhoversoveralinkusingJQuery【发布时间】：2011-05-2019:38:28【问题描述】：我有一份产品清单。<ul><li><ahref="chair.php">CHAIR</a></... 查看详情
jQuery - 当鼠标悬停在元素上时，如何继续动画？
】jQuery-当鼠标悬停在元素上时，如何继续动画？【英文标题】：jQuery-HowcanIcontinueananimationwhilethemousehoversoveranelement?【发布时间】：2011-01-2020:19:07【问题描述】：我需要一种方法来执行某种“whileonmouseover”功能，以便在鼠标悬停... 查看详情
仅当悬停在 li 中的 span 上时才显示下拉菜单
...在整个li上悬停，但我不希望悬停在“你好”上。当我将鼠标悬停在用户名上时，我必须得到一个下拉菜单。不是当我将鼠标悬停在 查看详情
将鼠标悬停在 Chrome 上时 CSS 图像会移动 [关闭]
】将鼠标悬停在Chrome上时CSS图像会移动[关闭]【英文标题】：CSSimagesmovewhenhoveringoveronChrome[closed]【发布时间】：2013-11-1400:51:56【问题描述】：当我将鼠标悬停在我的任何图像上时，它会稍微向右移动。这只发生在Chrome上。所有其... 查看详情
将鼠标悬停在css上时如何暂停幻灯片自动播放？
】将鼠标悬停在css上时如何暂停幻灯片自动播放？【英文标题】：Howtopauseslidesautoplaywhenyouhoveroverincss?【发布时间】：2021-10-1815:53:06【问题描述】：我有两个问题正在尝试解决，但没有成功。我正在尝试在动画中放置超过5张图片... 查看详情