---
id: 587d7faa367417b2b2512bd4
title: 給 D3 元素添加懸停效果
challengeType: 6
forumTopicId: 301469
dashedName: add-a-hover-effect-to-a-d3-element
---
# --description--
我們可以爲用戶的鼠標懸停行爲添加高亮顯示的效果。 到目前爲止，矩形的樣式應用了內置的 D3 和 SVG 方法，但是你也可以使用 CSS 來實現。
你可以使用 `attr()` 方法在 SVG 元素上設置 CSS class。 然後用 `:hover` 僞類爲你新添加的 CSS 類設置鼠標懸停的效果。
# --instructions--
用 `attr()` 方法給所有的 `rect` 元素都添加 `bar` class。 當鼠標懸停在元素上時，它的 `fill` 將變爲棕色。
# --hints--
`rect` 元素應該有 `bar` class。
```js
assert($('rect').attr('class').trim().split(/\s+/g).includes('bar'));
```
# --seed--
## --seed-contents--
```html
```
# --solutions--
```html
```