Creating a hover effect for a row in Bootstrap 4 without relying on a table structure

Is there a way to make a row hover without using a table and instead utilizing the grid system in Bootstrap 4? I've done some research but everything seems to suggest that creating a table is necessary for this effect. 

 <div class="row">
        <div class="report-card-i report-card-i-height">
            <h3 class="m-l-35 p-t-25 p-b-10">Compliance</h3>
            <div class="fa-orange m-t-10 m-b-15 m-l-80">
                <div class="row">
                    <div class="col-sm-1 col-xs-1 text-center">
                        <i class="fa fa-star m-r-15 text-center" style="font-weight: bold">Adjustment</i>
                    </div>
                    <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
                        <p>21,922</p>
                    </div>
                    <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
                        <p>$0.00</p>
                    </div>
                    <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
                        <p>$304,012.23</p>
                    </div>
                    <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
                        <p>$0.00</p>
                    </div>
                    <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
                        <p>$0.00</p>
                    </div>
                    <div class="col-sm-1 col-xs-1 text-center">
                        <i class="fa fa-angle-right text-center" style="font-weight: bold"></i>
                    </div>
                </div>
        </div>
    </div>

htmlcssbootstrap-4mousehover

Answer №1

.mydiv div:hover{background-color:gray;}
<div class="row">
        <div class="report-card-i report-card-i-height">
            <h3 class="m-l-35 p-t-25 p-b-10">Compliance</h3>
            <div class="fa-orange m-t-10 m-b-15 m-l-80">
                <div class="row mydiv">
                    <div class="col-sm-1 col-xs-1 text-center">
                        <i class="fa fa-star m-r-15 text-center" style="font-weight: bold">Adjustment</i>
                    </div>
                    <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
                        <p>21,922</p>
                    </div>
                    <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
                        <p>$0.00</p>
                    </div>
                    <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
                        <p>$304,012.23</p>
                    </div>
                    <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
                        <p>$0.00</p>
                    </div>
                    <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
                        <p>$0.00</p>
                    </div>
                    <div class="col-sm-1 col-xs-1 text-center">
                        <i class="fa fa-angle-right text-center" style="font-weight: bold"></i>
                    </div>
                </div>
        </div>
    </div>

Answer №2

If I were to make a change:

<div class="fa-orange m-t-10 m-b-15 m-l-80">
    <div class="row">

I'd modify it to:

<div class="fa-orange m-t-10 m-b-15 m-l-80">
    <div class="row highlight">

This update ensures that only rows with the .highlight class are affected by the following css selector:

.row.highlight:hover > * {
    background-color: #123456;
}

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

Ajaxed div disappears and reappears only after the div has finished loading

I ran into an issue with my jquery ajaxed site. The main content div is in the center with navigation on top. I needed to AJAX the content to prevent the flash video from restarting after each page load. My solution involved using the following code: $(do ...

ajaxhtmlhideshow

The HTML5 video tag may not start playing in Safari until the video has fully downloaded

While successfully loading videos on browsers using the HTML5 tag, I encountered a problem specifically with Safari. In all other browsers, the video plays while buffering, but in Safari it waits for the entire video to download before playing. Even after ...

javascripthtmlvideosafari

Update the button/icon upon form submission

I am currently working on developing a very basic HEART button plugin for Wordpress, which happens to be one of my earliest plugins. My main objective is to have the icon within the button change once it is clicked. Below is the code snippet I am using: f ...

javascripthtmlwordpressformsbutton

Disorganized jQuery Animation

Looking for some help with an animation I have on my website. The animation is supposed to smoothly move in and out when the mouse cursor hovers over it, but as you can see, it's a bit messy. This project involves HTML, CSS, and jQuery <!DOCTYPE ...

jquerycsshtmlanimation

Is there a way for me to retrieve the value from an input, round it up to the nearest even number, and assign it to a new variable?

I am working on a project that involves two text boxes and a drop-down menu for providing rates. The values in the text boxes are given as inches. I want these inputs to be taken as values, rounded up to the next even number, and then set as variables. How ...

javascripthtml

a guide on combining values for identical dates in a JSON file

I'm currently working on an Android app that involves displaying graph values, and I could use some help. The server is returning a JSON object in the following format: [{ "date": "01-03-2018", "value": "12", }, { "id": "01-03-201 ...

javaandroidhtmljson

Issue with innerHTML functionality within a div element

I'm currently troubleshooting an issue with a website that has suddenly stopped functioning properly. Unfortunately, I don't have access to the server at the moment, and I need to quickly understand how the system works. Essentially, there is a ...

javascripthtml

Tips for unchecking a checkbox when another checkbox is checked in Angular

My table displays a list of deleted items. Users have the option to either recover the item or delete it permanently. I am seeking assistance in ensuring that only one checkbox is checked in a table row, and unchecking other checkboxes if the user tries t ...

javascriptjqueryhtmlangularjscheckbox

Safari not updating Angular ng-style properly

I created a simple carousel using Angular and CSS animations which works well in Chrome. However, I recently tested it in Safari and noticed that the click and drag functionality does not work. I've been trying to fix this issue for days and could use ...

javascriptcssangularjsanimationdom

Swirling hues transforming into #000000 upon second attempt

My goal is to create a button that generates two random color codes. Initially, this button seems to work fine on the first click, but on the second click, both codes turn into #000000. Despite my attempts to troubleshoot the issue, I haven't been ab ...

javascripthtmlcss

Finding the appropriate method to access a template variable reference in a designated row of an Angular Material table (Angular 7)

Currently, I am working on implementing a more intricate version of a behavior inspired by Angular Material's tutorials. In my simplified example, an Angular Material table is populated with data from a string array. The first column contains input fi ...

javascripthtmlangulartypescriptangular-material

Decoding numerical XML entities using Lua

Is there a recommended method for converting numeric HTML/XML entities like &#10; into their ASCII equivalents? Here is an example expressed as a unit test: local orig = "It&#039;s the &#34;end&#34; &ok;&#10;" local fixd = unescap ...

htmlxmlluahtml-entitiesxml-entities

What is the best way to align and adjust the position?

I'm attempting to attach a button to a page. I may not be an expert, but here's what I have so far: body { width:100%; height:100%; background:#181516; overflow:hidden; position:absolute; } .bg { background:url(../im ...

cssbuttoncenter

What is the best way to align an image with the position of a div?

Looking for assistance on positioning an image to a div's position after it has been cloned. $(".raindrop1").clone().removeClass("raindrop1").appendTo("body"); $("img").css({"left": "div".x, "top": "div".y}); .shape{ border-radius: 50px; width: 10p ...

javascriptjqueryhtmlcss

Add a React component to the information window of Google Maps

I have successfully integrated multiple markers on a Google Map. Now, I am looking to add specific content for each marker. While coding everything in strings works fine, I encountered an issue when trying to load React elements inside those strings. For ...

htmlreactjstypescriptgoogle-maps

Implement a collapsible navbar using bootstrap

To create a responsive navbar that collapses into a burger menu when clicked, you can use the following HTML structure: <body> <header id="nav-wrapper"> <img id="logo" src="images/event-logo.png" /> <nav class="n ...

htmlcssbootstrap-4

Adding conditional href based on a specific criteria to an <a> tag in AngularJs

I have been working on a menu list where some menus contain URLs and others do not. When a menu item includes a URL, the href attribute is displayed, otherwise just the span tag is shown. I tried checking it like this but ended up with href="#" when the me ...

javascriptjqueryhtmlangularjs

Creating a dynamic and interactive table with Angular and the amazing angular-responsive-tables library

I am currently working on creating a responsive table using AngularJS. To demonstrate what I am trying to achieve, I have put together an example in this fiddle: https://jsfiddle.net/loredano/xnyzaLnu/1/ <tr ng-repeat="product in products" > &l ...

htmlcssangularjs

Experiencing difficulties with my image slider and struggling to determine the cause

Trying to create an image slider, but I'm encountering numerous challenges. It seems like everyone finds it easy to do, but for me, it's a struggle. I've been following along with this tutorial. Watch Tutorial Here However, the buttons don ...

javascripthtmlcssimage

What is the best way to make a textview span its layout in an android app?

Is there a way to style text in a TextView layout itself without using any programming? I have about 20 XML files and no activity associated with them. I've tried using tags but it doesn't seem to work. android:text="Lets look how to make < ...

androidtextviewhtml