<!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 对于知识的学以致用的解释
- ¥50 三种调度算法报错 有实例
- ¥15 关于#python#的问题，请各位专家解答！
- ¥200 询问：python实现大地主题正反算的程序设计，有偿
- ¥15 smptlib使用465端口发送邮件失败
- ¥200 总是报错，能帮助用python实现程序实现高斯正反算吗？有偿
- ¥15 对于squad数据集的基于bert模型的微调
- ¥15 为什么我运行这个网络会出现以下报错？CRNN神经网络
- ¥20 steam下载游戏占用内存
- ¥15 CST保存项目时失败