How to make the heading hover in BOOTSTRAP 5?

function13 0
Viewed 42

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>

bootstrap-5 javascript css html
3 Answers

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>

UmairFarooq0

So if you want to change the color of the text in the two span elements when hovering over them, you will need to use CSS as this cannot be achieved with just Bootstrap. To do this you need to select the div with the id="title" and its children. Your CSS might looks like this:

#title:hover span {
color: "yellow";
}

or

span:hover {
color: "yellow";
}

Also I recommend rearranging the elements in your #title - they probably shouldn't all be wrapped in a p tag. Also look into Flexbox to learn more.

user9wmS0
Zakaria Ait Ali0
Related