<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="login_nav">
<span class="account-nav">1111qqqqqqqqqqqqq1</span>
<span class="phone-nav">2222qqqqqqqqqqq</span>
</div>
</body>
</html>
<style lang="scss">
.account-nav:hover{
color: red;
}
/* 控制另外一个元素改变, 这样写无效 , 用~ 也无效* /
.phone-nav:hover+.account-nav{
color:red
}
</style>
关注
码龄 粉丝数 原力等级 --
- 被采纳
- 被点赞
- 采纳率

已结题
css hover控制相邻元素样式改变, 这样写无效 ,请教原因
收起
- 写回答
- 好问题 1 提建议
- 关注问题
微信扫一扫
点击复制链接分享
- 邀请回答
- 编辑 收藏 删除
- 收藏 举报
8条回答 默认 最新
- 关注
码龄 粉丝数 原力等级 --
- 被采纳
- 被点赞
- 采纳率
关注
感觉你对相邻选择器有些误解,
相邻兄弟选择器 (+) 介于两个选择器之间,当第二个元素紧跟在第一个元素之后,并且两个元素都是属于同一个父元素的子元素,则第二个元素将被选中。https://developer.mozilla.org/zh-CN/docs/Web/CSS/Adjacent_sibling_combinator
<template> <div id="app"> <div class="login_nav"> <span class="account-nav">1111qqqqqqqqqqqqq1</span> <span class="phone-nav">2222qqqqqqqqqqq</span> </div> </div> </template> <script> export default { name: "App", components: {}, }; </script> <style lang="scss"> .account-nav:hover { color: red; } .account-nav:hover + .phone-nav { color: red; } </style>
本回答被题主选为最佳回答 , 对您是否有帮助呢? 本回答被专家选为最佳回答 , 对您是否有帮助呢? 本回答被题主和专家选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报微信扫一扫
点击复制链接分享
编辑预览轻敲空格完成输入- 显示为
- 卡片
- 标题
- 链接
评论按下Enter换行,Ctrl+Enter发表内容
编辑
预览

轻敲空格完成输入
- 显示为
- 卡片
- 标题
- 链接
报告相同问题?
提交
- 2022-10-23 18:01回答 5 已采纳 JQ改变背景的写法: $('#Collections-1').hover(function(){ $("#hoverimg").css({"background-image":"url(.
- 2022-03-12 08:50回答 2 已采纳 <div class="parent"> <div>第一个div<div> <div class="div2">第二个div<d
- 2022-04-04 09:46回答 2 已采纳 用z-index给层级关系
- 2021-11-12 02:44万里红妆的博客 <div class="download">下载按钮</div> <....download:hover ~ div{//可控制同级不相邻元素:使用符号“~”拼接 background: red; } .download:hover + .sousuo{//可控制同...
- 2018-10-23 05:48回答 1 已采纳 css的选择符只能是从父到子,从上到下的顺序。无法根据子元素的状态来改变祖先元素。 你的这个问题只能是改变:hover元素的下面的某个兄弟元素的高度,把祖先元素的高度撑起来。 ```
- 2021-12-05 08:22回答 2 已采纳 你看一下,用.div3.div2 或者 .div3+.div2都行,关键是在html部分,要把div2放div3下面!第一种:+ 相邻兄弟选择器(.div3 .div2)只能选择与自己紧紧相连的身
- 2022-04-03 07:36回答 3 已采纳 把二维码这个标签写到你:hover的标签里面
- 2020-09-25 02:58在CSS中,`:hover`伪类用于定义元素在鼠标悬停时的样式。在这个特定的问题中,用户尝试在`<a>`标签内的`<span>`元素上应用`:hover`效果,但发现在IE6浏览器中不起作用。这个问题是由于早期版本的IE浏览器对CSS选择器...
- 2022-03-21 14:39回答 2 已采纳 无法控制父级元素或者上一级元素控制相邻的下下一个元素是 .box3:hover+div+div <!doctype html> <html lang="en"> <hea
- 2022-01-14 07:52回答 3 已采纳 let a= document.getElementById("a"); a.style.display="block"; 首先取得要操作的元素,然后直接修改style里的属性即可
- 2022-03-16 10:18回答 2 已采纳 https://blog.csdn.net/xiaoyou625/article/details/111027838
- 2020-11-21 13:46weixin_39926613的博客 近年来随着CSS的发展,伪元素/伪类也开始被大量应用:在性能愈加被看中的当下,处于文档流之外的CSS伪元素/伪类是当之无愧的“无冕之王”!下面笔者总结的一些关于CSS的“骚操作”,希望能对你产生帮助::hover和:...
- 2020-12-13 12:06有些时候需要用到mouseover和mouseout这两个鼠标事件,但是写js又比较麻烦,还要添加监听事件,所以能用css解决的东西尽量yongcss解决,这样可以提高性能,下面说一下我对:hover 的了解: 之前在学计算机应用的时候,...
- 2021-01-22 02:41用CSS伪元素控制元素的时候经常性的需要改变一些元素的样式,网上有许多博客都说了如何去控制一个的改变,但是我在实际写的过程中,发现更多时候是需要控制多个连续元素的改变。 使用伪元素去控制(以:hover为例),...
- 2020-10-19 17:43在网页开发中,hover效果通常用于在用户将鼠标悬停于页面元素上时改变该元素的外观,从而提升用户的交互体验。虽然通常使用CSS来实现hover效果,但有时出于特定需求,我们可能会选择使用JavaScript来完成这项任务。 ...
- 没有解决我的问题, 去提问
问题事件
联系我们(工作时间:8:30-22:00)
400-660-0108kefu@csdn.net在线客服
- 京ICP备19004658号
- 经营性网站备案信息
公安备案号11010502030143
- 营业执照
- 北京互联网违法和不良信息举报中心
- 家长监护
- 中国互联网举报中心
- 网络110报警服务
- Chrome商店下载
- 账号管理规范
- 版权与免责声明
- 版权申诉
- 出版物许可证
- ©1999-2025北京创新乐知网络技术有限公司