发表新帖
发表新帖

How to change active link color in bootstrap css?

前端 未结
关注
9 829
余生分开走
余生分开走 2021-02-08 03:00

I am using joomla 3 and bootstrap.min.js I am creating menu and giving special class in order to change hover, active, visited links and style of the menu. I could not find how

9条回答
  • 爱一瞬间的悲伤
    爱一瞬间的悲伤 (楼主)
    2021-02-08 03:40

    In order to do what your are trying to do you must first understand a:hover Must come after a:link and a:visited in the CSS definition in order to be effective. If they are not in this order then they will not work.

    Second is you must understand that if you where thinking (a:active) meant the color of the current link the end user was on, this is incorrect. (a:active) changes the color when you click on the link. You can test this by holding down the mouse button on the link that you made a different color with the (a:active).

    Finally, if you are trying to do this using just CSS you have to add a specific class on the current link

    • that the end user is on. Below I left you an example hope this helps :)

    Your Navigation Bar As Follows
    -Home
    -Russia
    -Italy

    We are on the Italy Page For This Example:

    /*YOUR CSS SHOULD LOOK LIKE THIS*/

/* unvisited link grey */
#top-menu a:link {
	color: #777;
}
/* visited link grey */
#top-menu a:visited {
	color: #777;
}
/* mouse over link blue */
#top-menu a:hover {
	color: #0CF;
}
/* selected link blue */
#top-menu a:active {
	color: #0CF;
}
/* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
.activePage a {
	color: #0CF !important
}

    Notice I did not put the .activePage tag in the other links? What this does is allow your original colors that you choose in your css for your navigation bar to still take place while the page that is active stays solid with a different color.

    The reason this worked is because I added !important at the end of the color for that separate class.

    .activePage {
  color: #0CF !important
}
    So to apply this same technique to your other pages it would simply look like this:

    Home Page

    /*YOUR CSS SHOULD LOOK LIKE THIS*/

/* unvisited link grey */
#top-menu a:link {
	color: #777;
}
/* visited link grey */
#top-menu a:visited {
	color: #777;
}
/* mouse over link blue */
#top-menu a:hover {
	color: #0CF;
}
/* selected link blue */
#top-menu a:active {
	color: #0CF;
}
/* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
.activePage a {
	color: #0CF !important
}
    I hope I gave you a solid answer to your question because I hate it when I look all over the web and can't truly find the answer I am looking for.

0 讨论(0)
 看不清?
提交回复
热议问题