---
id: 587d7faa367417b2b2512bd4
title: Add a Hover Effect to a D3 Element
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
challengeType: 6
videoUrl: ''
localeTitle: 将悬停效果添加到D3元素
---
## Description
当用户用鼠标悬停在其上时,可以添加突出显示条形的效果。到目前为止,矩形的样式使用内置的D3和SVG方法,但您也可以使用CSS。使用attr()
方法在SVG元素上设置CSS类。然后,新类的:hover
伪类保存任何悬停效果的样式规则。
## Instructions
使用attr()
方法向所有rect
元素添加一个bar
类。将鼠标悬停在其上时,会将条形的fill
颜色更改为棕色。
## Tests
```yml
tests:
- text: 你的rect
元素应该有一类bar
。
testString: 'assert($("rect").attr("class") == "bar", "Your rect
elements should have a class of bar
.");'
```
## Challenge Seed
## Solution
```js
// solution required
```