Issue
Kindly guide me how to make this heading hover in Bootstrap because I tried css but it isn't working. Thank you in advance.
NOTE. Not included bootstrap links as I am using the downloaded compiled files.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap-Begining</title>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
</head>
<body>
<!--TOP BAR THAT GONNA HOLD TITLE AND MENU-->
<div id="top-bar"class="container-fluid"
style="background-color: black;">
<div class="row">
<div id="title"class="col-6 p-5"style=" border: 1px solid white;">
<p id="logo"style="color:white ;font-family: Lato;margin-left: 30%;">
<span style="font-size:45px;">ENERGY FLASH.</span><br> /MUSIC BLOG</p>
</div>
<div id="menu"></div>
</div>
</div>
</body>
</html>Solution
hovering on #logo>spanwhich means direct child inside #logo of type span and changing the color of its text
#logo>span:hover{
color:purple;
cursor:pointer
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap-Begining</title>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
</head>
<body>
<!--TOP BAR THAT GONNA HOLD TITLE AND MENU-->
<div id="top-bar"class="container-fluid"
style="background-color: black;">
<div class="row">
<div id="title"class="col-6 p-5"style=" border: 1px solid white;">
<p id="logo"style="color:white ;font-family: Lato;margin-left: 30%;">
<span style="font-size:45px;">ENERGY FLASH.</span><br> /MUSIC BLOG</p>
</div>
<div id="menu"></div>
</div>
</div>
</body>
</html>Answered By - UmairFarooq Answer Checked By - David Goodson (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.