<!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控制相邻元素样式改变, 这样写无效 ,请教原因
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
分享- 邀请回答
-
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>本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报 分享
问题事件
系统已结题
5月19日
已采纳回答
5月11日-
修改了问题
5月9日
-
创建了问题
5月9日
悬赏问题
- ¥15 虚幻5 UE美术毛发渲染
- ¥15 CVRP 图论 物流运输优化
- ¥15 Tableau online 嵌入ppt失败
- ¥100 支付宝网页转账系统不识别账号
- ¥15 基于单片机的靶位控制系统
- ¥15 真我手机蓝牙传输进度消息被关闭了，怎么打开？(关键词-消息通知)
- ¥15 下图接收小电路，谁知道原理
- ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
- ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
- ¥15 手机接入宽带网线，如何释放宽带全部速度