题目：

实现当鼠标指针划过时动态改变显示内容及其样式。在滑过的公告左侧添加三个大于号 >>>，并将其背景色改成绿色。

分析：

1.文字效果可以通过CSS的伪选择器 :hover 来实现，当鼠标悬浮在该元素上时，显示对应的样式表。
2.改变内容需要监听元素的 mouseover 事件，当触发该事件时，在该元素内容前加上三个大于号 >>>
然后我们一步步去实现。

---

01首先，编写基础HTML和CSS代码

<div id="app">
  <div id="title">网站公告</div>
  <ul id="ulist">
    <li> 网站公告</li>
    <li>网特特效锦集</li>
    <li> 新闻列表滑过网页特效</li>
    <li>鼠标滑过改变标签内容</li>
    <li>新闻图片特效</li>
  </ul>
</div>

在HTML的头部记得将jQuery库放在html的同目录下，并引入，代码如下。

<script src="https://blog.fqidc.cn/jquery-3.4.1.min.js"></script>

此时，在浏览器里运行效果如下。

下面继续写样式，常规的CSS代码如下：

#app {
    width: 300px;
}
#title {
    position: relative;
    left: 40px;
}
li {
    display: block;
    border: 1px solid lightgray;
    border-top: 0px;
   cursor: pointer;
}
li:first-child {
   display: block;
   border: 1px solid lightgray;
   cursor: pointer;
}

其中，li:first-child 指的是第一个 li 标签，它的边框是4周都有，其他的li标签都是上边框没有，剩下三边有。效果如下。

---

02鼠标滑过时改变元素样式

然后来看如何实现鼠标滑过时，改变元素的样式，这个方法有多种，但最简单也是效率最高的应该是使用CSS的伪元素选择器，代码如下：

 li:hover{
     background-color: greenyellow;
}

其中 li:hover 表示鼠标悬浮(hover)在该元素上时，使用这里定义的样式。

---

03鼠标滑过时改变元素内容内容
思路是，监听元素的 mouseover 事件，当监听到事件时，增加三个大于号 >>> ，代码如下

$('#ulist li').on('mouseover', function() {
     $(this).text('>>>' + $(this).text())
})

其中，jQuery回掉函数中，this 指向的是触发事件的元素对象，可以用 $(this) 将其包装成jQuery对象，然后在调用 text() 方法获取或设置文本内容。

写完以后，效果如下。

运行，发现一个问题，就是如果鼠标移出后，>>> 没有去掉，再次进入时，还会再加三个。为了解决这个问题，我们需要监听 mouseout 事件，将 mouseover 事件中加的三个大于号 >>> 去掉。代码如下。

$('#ulist li').on('mouseout', function() {
     $(this).text($(this).text().substr(3))
})

增加这三行代码后，效果如下：

转载于今日头条博主：开始study