满口金牙 2022-05-09 11:13 采纳率: 90.4%
浏览 328
已结题

css hover控制相邻元素样式改变, 这样写无效 ,请教原因

<!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>
  • 写回答

8条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-05-09 14:10
    关注

    感觉你对相邻选择器有些误解，
    相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。

    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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(7条)
编辑
预览

报告相同问题？

问题事件

  • 系统已结题 5月18日
  • 已采纳回答 5月11日
  • 修改了问题 5月9日
  • 创建了问题 5月9日