How to make the heading hover in BOOTSTRAP 5?-CodePudding

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"
    style="background-color: black;">
    <div >
      <div id="title"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>

CodePudding user response：

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"
    style="background-color: black;">
    <div >
      <div id="title"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>

CodePudding user response：

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";
}

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.

CodePudding user response：

You can look for information about the hover effects in the documentation https://mdbootstrap.com/docs/standard/content-styles/hover-effects/#docsTabsOverview