How can you create a hovering effect for the heading in BOOTSTRAP 5?

I am seeking assistance on how to create a hover effect for this heading in Bootstrap. I have tried using CSS without success. Thank you in advance.

NOTE: I have not included the Bootstrap links as I am utilizing 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>

javascripthtmlcssbootstrap-5

Answer №1

When you hover over #logo>span, it means directly targeting a child element within the #logo element that is a 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>

Answer №2

To change the text color of the two span elements when hovering over them, you will need to utilize CSS instead of relying solely on Bootstrap. In order to achieve this effect, you must target the div with the id "title" and its child elements. Your CSS code may resemble the following:

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

Alternatively, you can use the following CSS code:

span:hover {
color: "yellow";
}

I also suggest reorganizing the elements within your #title container - they should not all be contained within a p tag. Additionally, consider exploring Flexbox for more layout options.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What specific CSS selector should be targeted in order to modify the appearance of this button?

I'm attempting to alter the appearance of a button within my Wordpress site, but I've hit a roadblock in identifying the correct element to modify. So far, I've tried targeting: .input#chained-quiz-action-1, however, the button stubbornly re ...

jqueryhtmlcsswordpress

When a page is changed, the Vue.js Active Menu color remains enabled

Check out my website at . I want to customize the navigation bar so that only the active page's navbar li is colored in red. <div class="navigation-items"> <ul class="nav-list"> <li class="nav-item"><nuxt-link to="/en" ...

javascriptcsstwitter-bootstrapvue.jsnuxt.js

Maintain the style of the main navigation menu when hovering over the sub-navigation items

I am currently in the process of redesigning the navigation bar for a specific website. The site utilizes Bootstrap, with a main navbar and a secondary navbar-subnav. While I have been able to style both navs accordingly, I am encountering difficulties whe ...

cssnav

Issue: The d-inline-flex and flex-row-reverse combination in Bootstrap is malfunctioning

I am trying to achieve a specific layout in my HTML, as shown below: https://i.sstatic.net/fVUt1.png <p>Use .flex-row-reverse to right-align the direction:</p> <div class="d-inline-flex flex-row-reverse bg-secondary"> & ...

twitter-bootstrapbootstrap-4bootstrap-5

Tips on adding background images to your chart's background

Is there a way to set an image as the background in Lightning Chart using chartXY.setChartBackground? ...

javascriptlightningchart

Tips for reducing the JavaScript file size outputted by a liquid template generator

Currently, I am working on enhancing the performance of my Shopify website and GoogleSpeed Insights is suggesting that I minify css and js files. However, the recommended files are all created by the liquid template generator, making it challenging to uti ...

javascriptcssminifyliquid

URL for Database Query String

I need help figuring out how to extract database information using a URL. On the page, each event entry should have a hyperlink that leads to a new form where administrators can record results for that specific event. The EventID is passed as a query st ...

phpmysqlhtml

Simple steps to change JSON Object to JavaScript array

Referring to this question and this other one, I am seeking advice on how to handle a JSON object structure different from the examples provided: This is my JSON Object: var myData = { "04c85ccab52880": { "name": "name1", "firstname": ...

javascriptjqueryarraysjson

Creating a customized Axios instance in Typescript can provide more flexibility and control over

I am looking to create an API with a customizable instance using Axios. Ideally, I want to be able to use a basic instance like this: api.get("url")... In addition, I would like to have the flexibility to add dynamic bodies and access them using something ...

javascripttypescriptaxios

Using a React component to import a module for publishing on NPM

Creating my first React component for NPM publication has been quite the learning experience. I decided to use the react-webpack-component package from Yeoman to kickstart my project. However, upon installing and importing my component into a React app, I ...

javascriptreactjsnpm

Function that returns a lookup map for TypeScript enums

For my React project, I've created a function that transforms a lookup class into an array that can be used. The function is functioning properly, but it seems to loop through the enum twice, resulting in undefined values for the first iteration. Alt ...

javascriptreactjstypescriptenums

What is the best way to send an object from the front end to the backend using res.send?

In my current project, I am establishing communication between the frontend and backend. The process involves the backend sending an expression to the frontend for computation, after which the computed answer needs to be sent back to the backend. For exam ...

javascriptnode.jsexpress

Empower your presentations with slick cloning technology

I am facing an issue with my slider that I cannot seem to resolve. Currently, I am using slick to display 3 slides, but only the center one shows all the content. To achieve a continuous infinite slider effect where all slides appear in the center, I need ...

javascriptjquerycsssliderslick.js

Tips for refreshing views with Angular JS

I am looking to refresh all the views displayed on my page. The layout consists of a Header, Footer, and Body view. Within the Header view, there is a dropdown menu where users can choose their preferred language. Upon selecting a language, I want all the ...

javascriptjqueryangularjs

Why does Chrome keep retrieving an outdated JavaScript file?

Lately, I've been facing a frustrating issue that I just can't seem to figure out. Every now and then, when I update the JavaScript or CSS files for my website hosted on Siteground, Chrome simply refuses to acknowledge the changes. While other br ...

javascripthtmlgoogle-chromecachingbrowser-cache

Tips for generating automatic views in Backbone without manual instantiation

Is there a more efficient way to instantiate the view rather than directly below the definition? var BVApp = Backbone.View.extend({ Name: 'BVApp', // do chonka stuff }); $A.Class.add(new BVApp()); ...

javascriptbackbone.js

Utilizing ReactJS to retrieve configuration settings from a YAML file, similar to how it is done

Our team is currently using a full-stack multi-microservice application where the backend java components utilize the spring @value annotation to fetch configuration values from a yml file. This method has been effective and even the Java side of our UI c ...

javascriptjavareactjsspringconfiguration

One method is able to operate on a variety of tables

I am faced with the challenge of wrapping text in each header column of a table generated in a backend, and adding it to each body column cell using .html() and .prepend(). The expected result is that the text will appear in green. However, the problem ar ...

htmljquerycss

Combining two arrays of objects in JSON files based on a shared key

Seeking assistance to merge two object arrays in JavaScript/jQuery based on a common key (code). These arrays are sourced from separate JSON files. I've provided shortened versions of the files as they are lengthy. Appreciate any help in advance. O ...

javascriptjqueryarraysobject

Various instances of controllers in Angular.js and JavaScript

I'm facing a challenge with a view that has two identical parts but different content. I want to find a way to use one controller and one view for both the left and right parts. Here's what I currently have in my HTML: <div class="board_bod ...

javascriptangularjs