---
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
---
## Description
It's possible to add effects that highlight a bar when the user hovers over it with the mouse. So far, the styling for the rectangles is applied with the built-in D3 and SVG methods, but you can use CSS as well.
You set the CSS class on the SVG elements with the attr() method. Then the :hover pseudo-class for your new class holds the style rules for any hover effects.
## Instructions
Use the attr() method to add a class of bar to all the rect elements. This changes the fill color of the bar to brown when you mouse over it.
## Tests
```yml
tests:
- text: Your rect elements should have a class of bar.
testString: 'assert($("rect").attr("class") == "bar", "Your rect elements should have a class of bar.");'
```
## Challenge Seed
## Solution
```js
// solution required
```