Question: In my website i use svg elements. Sometimes i need them to be clickable, therefore i want pointer cursor over them.

However adding css class or style

```
cursor: pointer;

```

not work.

That's the example element

```
<object id="male2" type="image/svg+xml" data="course/ani/male2.svg" style="left: 87px; bottom: 56px;" es-character="male2"></object>

```

It seems like it just not worki with svg. Anyone know how to fix, or how to go around it?

Answer: 
As AmeliaBR's comment indicates, you should add this style inside the SVG `<object>`.

And unless your SVG is very simple, you may have the same issue I had: only seeing a pointer when you are hovering over one of the shapes in the SVG, but not when you're between shapes. 

(In some cases you might want that behavior, but for a wordmark, for example, you typically want the whole rectangle to be clickable, not just the individual letters.)

To make the whole rectangle clickable, add `svg { cursor: pointer; }`. If you just want specific elements clickable, name them by class:

```
<svg ...>
  <style>
    svg { cursor: pointer; } /* whole rectangle */

    /* OR */

    .element-name { cursor: pointer; } /* specific elements */
  </style>
  ...
</svg>

```
If adding "`cursor: pointer`" directly to the `svg` element does not work, you can either try to add an transparent element (Pseudo elements directly on the `object` tag do not work) with the same dimensions as the SVG which is absolutely positioned over the SVG. 

```css
a.svg-cursor:before {
content: "";
display: block;
position: absolute;
background-color: transparent;
cursor: pointer;
/* plus width and height of the SVG */
}
```

```html
<a href="#" class="svg-cursor">
<object id="male2" type="image/svg+xml" data="course/ani/male2.svg" es-character="male2"></object>
</a>
```

Or you can take an `img` instead of `object` and add the "`cursor: pointer`"-style to the img:

`<img id="male2" src="course/ani/male2.svg" style="left: 87px; bottom: 56px;" alt="Description" />`