Currently, I'm attempting to create two buttons that will filter a specific category within a blog and integrate them into the sidebar of my website. To do this, I've inserted the entire code, style, and HTML into a widget. These buttons are essentially basic links with images that change when hovered over.
However, an unexpected issue arises where these buttons end up appearing inside the title bar of the subsequent widget in the sidebar.
Below is the code snippet:
<style>
a.filter{
display:block;
width: 100px;
height: 100px;
float: left;
margin: 5px ;
background: url("http://www.example.com/image1.png");
background-size:cover;
}
a.filter:hover{
background: url("http://www.example.com/hover_image1.png");
background-size:cover;
}
a.filter2{
display:block;
width: 100px;
height: 100px;
float: left;
margin:5px;
background: url("http://www.example.com/image2.png");
background-size:cover;
}
a.filter2:hover{
background: url("http://www.example.com/hover_image2.png");
background-size:cover;
}
</style>
<a href="http://www.example.com/?cat=25" class="filter"></a>
<a href="http://www.example.com/?cat=10" class="filter2">
</a>
Despite numerous attempts to rectify this through CSS modifications, I have been unable to resolve the issue. It seems like the new code might be conflicting with something in the style.css file, but pinpointing the exact cause remains elusive.