---
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: Añadir un efecto de desplazamiento sobre un elemento D3
---
## Description
Es posible agregar efectos que resalten una barra cuando el usuario se desplaza sobre ella con el mouse. Hasta ahora, el estilo de los rectángulos se aplica con los métodos D3 y SVG incorporados, pero también se puede usar CSS. Establece la clase CSS en los elementos SVG con el método attr() . Luego, la pseudo-clase :hover para su nueva clase contiene las reglas de estilo para cualquier efecto de hover.
## Instructions
Use el método attr() para agregar una clase de bar a todos los elementos rect . Esto cambia el color de fill de la barra a marrón cuando pasas el mouse sobre ella.
## Tests
```yml
tests:
- text: Tus elementos rect deben tener una clase de bar .
testString: 'assert($("rect").attr("class") == "bar", "Your rect elements should have a class of bar.");'
```
## Challenge Seed
## Solution
```js
// solution required
```