<style> tag issue in WP widget

Question

I'm trying to make a simple image link with :hover inside a WordPress widget which supports HTML Source Code.

Please fin my code:

<style>
a.filtro{
width:100px;
background: url("http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro-02.png");
}

a.filtro:hover{
width:100px;
background: url('http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro_sel-02.png');
}
</style>

<a href="http://www.tk.gvdgvd.net/?cat=10" class="filtro"></a>

The link simply does not appear in the page now

I don't know what's wrong here, is it something that my widget does not support my css? Is all the "hover" css done right? maybe it's messed up too, but i can't find whats wrong with the code either.

Thanks in advance!

Answer 1

a {display:block; width:100px;height:auto;}

Answer 2

You should first copy the css code and paste in style.css, if it does work pasting in style.css then there must be porblem with widget area. There are couple of plugin available you can use that too. for eg :
https://wordpress.org/plugins/tags/text-widget If this is doesn't work then try this one. Alternate way is to check if you copy the same code in other wordpress and paste in widget I guess it will work.

Answer 3

<style>
a.filtro{
width: 196px;
height: 196px;
display: block;
background: url("http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro-02.png");
}

a.filtro:hover{
background: url('http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro_sel-02.png');
}
</style>

<a href="http://www.tk.gvdgvd.net/?cat=10" class="filtro"></a>