CSS:通过hover控制切换固定栏内容

RickyJade

已于 2022-10-12 14:29:01 修改

阅读量394

点赞数

文章标签：前端 javascript html css

于 2022-10-10 14:13:01 首次发布

本文链接：https://blog.csdn.net/Shininlee/article/details/127242075

版权

本文介绍如何使用CSS的`:hover`伪类来控制固定侧边栏的内容切换，包括改变子元素、兄弟元素及兄弟元素的子元素显示状态的方法。详细列举了3个关键知识点：1. 父元素:hover下的子元素；2. 兄弟元素1:hover后的兄弟元素2；3. 兄弟元素1:hover后的兄弟元素2的子元素。

摘要由CSDN通过智能技术生成

设置这样一个固定侧边栏的在hover时改变显示内容：代码如下

<template>
  <div>
    <div class="button">
      <ul>
        <li class="l1">
          <div class="img1">
            <img src="@/assets/images/wechat1.png">
          </div>
          <div id="b1">
            <div class="button_1">
              <img src="@/assets/images/add.png">
              <div class="text">扫码加微信</div>
              <div class="triangle"></div>
            </div>
            <img src="@/assets/images/wechat_1.png">
          <