(css)列表点击前后样式

最新推荐文章于 2024-08-20 13:42:14 发布

nyf_unknown

最新推荐文章于 2024-08-20 13:42:14 发布

阅读量762

点赞数

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/qq_44754635/article/details/131914884

版权

CSS 专栏收录该内容

53 篇文章 1 订阅

订阅专栏

该文章展示了如何使用CSS和Vue.js来处理列表元素的点击事件，实现点击前后不同的样式效果。通过在HTML中添加事件监听器和动态类绑定，以及定义CSS样式，当列表项被点击时，其颜色、边框和内部小圆点的背景色会发生变化，同时hover和focus状态也有所调整，提供更好的用户交互体验。

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

(css)列表点击前后样式

效果：

在这里插入图片描述

html

<ul v-show="rightOne" class="one-content">
  <li
    v-for="(item,index) in exampleList"
    :key="index"
    @click="searchHandle(item,index)"
    class="liClass"
    :class="{ 'active': change1 === index }"//不可少
    tabindex="1" //不可少
  >
    <div class="liTip">
      <div class="liTipmini"></div>
    </div>
    <span class="liSpan" :title="item">{{item}}</span>
  </li>
</ul>

css

.one-content {
  height: 84%;
  background-image: url("../assets/image/list-background.png");
  background-size: 100% 100%;
  padding: 0px 10px 10px 30px;
  font-size: 16px;
  font-family: Medium-font;
  overflow-y: auto;
  .liClass {
    line-height: 50px;
    padding: 0 10px;
    border-bottom: 1px solid rgba(3, 92, 222, 0.4);
    display: flex;
    align-items: center;
    color: #8a8989;
    cursor: pointer;
    .liTip {
      width: 14px;
      height: 14px;
      border: 1px solid #8a8989;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      .liTipmini {
        width: 4px;
        height: 4px;
        background-color: #8a8989;
        border-radius: 50%;
      }
    }
    .liSpan {
      width: 95%;
      margin-left: 10px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .active {
    color: #fff !important;
    border-bottom: 1px solid #7fd6b4 !important;
    .liTip {
      border: none;
      .liTipmini {
        background-color: #fff;
      }
    }
  }
  .liClass:hover,
  .liClass:focus {
    color: #fff;
    border-bottom: 1px solid #7fd6b4;
    .liTip {
      border: none;
      .liTipmini {
        background-color: #fff;
      }
    }
  }
}