Issue
I'm using MDBootstrap for my project. I have used list of <a href> tags for a list as below
<a class="list-group-item list-group-item-action text-right hoverlist "
id="list-1"
data-toggle="list"
href="#list-1"
role="tab"
aria-controls="cat01">cat01<i class="fa fa-home"></i> </a>
This is the final preview
What I wants to do is to remove this blue color and then change color in to red. So I have tried below code
.hoverlist{
background-color:red;
}
But nothings get changes. Could anyone please tell me why is that?
Thanks
Solution
Well, there are two ways;
css properties are overridden from top to bottom:
The first is: I don't understand whether the css implemented resides in an external file or not. But if it is place the link to the css file under the link for mdbootstrap. Like this:
<html>
<head>
<link href="mdbootsstrap.css" rel="stylesheet">
<link href="your css file" rel="stylesheet">
</head>
</html>
or secondly, use the following code:
<a class="list-group-item list-group-item-action text-right hoverlist "
id="list-1"
data-toggle="list"
href="#list-1"
role="tab"
aria-controls="cat01" style="background-color: red">cat01<i class="fa fa-home"></i> </a>
Here, i have added style attribute to the link which will override all other css implementations.
See this pen: https://codepen.io/MansoorAhmed/pen/yLBKppw
Answered By - user11484655 Answer Checked By - Pedro (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.