Move your cursor over the button to cross out the text

I'm currently modifying my code to have the text display a strikethrough line when I hover over the delete button. This functionality is similar to using the CSS property text-decoration: line-through. UPDATE: I want the phrase "Creating this basic TODO Website" to have a strikethrough effect when the delete button is hovered over

Is there a way to accomplish this without utilizing JavaScript, or will I need to incorporate JavaScript? (My current framework is Bootstrap4)

The relevant section of the code is as follows:

<tr>
  <th scope="row">3</th>
  <td class="text-justify">Creating this basic TODO Website</td>
  <td>14/05/2020</td>
  <td>
    <div class="progress">
      <div class="progress-bar" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">10%</div>
    </div>
  </td>
  <td>
    <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="top" title="Edit" onclick="window.location.href='Edit.html' ;">
        <i class="material-icons">create</i>
     </button>
    <button type="button" class="btn btn-warning">
        <i class="material-icons">delete</i>
    </button>
  </td>
</tr>
htmlcssbootstrap-4

Answer №1

Got it, I see where you're coming from with your issue. The challenge lies in the absence of a "previous sibling" or "parent" selector in CSS. However, by creatively manipulating the DOM and utilizing pure CSS, you can still achieve your desired outcome.

table tr {
  display:flex;
  flex-direction: row-reverse;
}

table tr td:hover+td+td+td+td.your-text {
  text-decoration: line-through;
}
<table border=1>
  <tr>
     <td>
      <button type="button" class="btn btn-warning">
          <i class="material-icons">delete</i>
      </button>
    </td>
    <td>
      <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="top" title="Edit" onclick="window.location.href='Edit.html' ;">
          <i class="material-icons">create</i>
       </button>
     </td>
    <td>
      <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">10%</div>
      </div>
    </td>
    <td>14/05/2020</td>
    <td class="text-justify your-text">Creating this basic TODO Website</td>
    <th scope="row">3</th>
  </tr>
</table>

Here's how it works: By reversing the order of the td's and using CSS flexbox to re-reverse them visually, you can maintain the appearance of normal order while keeping it reversed in the DOM. You can then utilize the next element selector (+) multiple times to achieve the desired effect. Additionally, I split the buttons cell into two parts to specifically target the delete button's cell.

Answer №2

Using CSS, you have the ability to achieve this.

i:hover {
     text-decoration: line-through;
  }

Answer №3

Using bootstrap X doesn't limit your ability to utilize CSS:

button.not-in-use:hover, button.not-in-use i:hover {
    text-decoration: line-through;
}
<button class="not-available">
    <i>add</i>
</button>
<button>
    <i>remove</i>
</button>

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

Material-UI: The Mystery of Missing CSS Properties

Struggling to apply a CSS class to an element from Material-UI: bw:hover { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } Tried using makeStyles: import { makeStyles } from '@material-ui/core/styles' ...

javascriptcssreactjsmaterial-ui

"Exploring the versatility of using variables in jquery's .css

I’m facing an issue where I need the rotation of a div to be based on the value stored in "anVar." This is what I currently have: function something() { $('.class').css('-webkit-transform:rotate('anVar'deg)') } The desi ...

javascriptjquerycssvariablesrotatetransform

Checking the validity of user input statements

When 2 conditions are met, both error links and messages will display on top of each other. If an input is 0, the validation statement for empty inputs will also trigger. Additionally, if one input is not numeric but the other is, PHP will calculate the va ...

phphtmlif-statement

Inject CSS styles into panelgrid on-the-fly

How can I pass a color code property fetched from ebean to a css function? <h:panelGrid id="testpanel" columns="#{message.no_of_columns}" rows="#{message.no_of_rows}" styleClass="dynamicGrid"> <c:forEach items="#{bLDashBoar ...

cssjsf

A guide on incorporating ":host" (or ":host()") with ":has()"

Is there a way to properly use :host (or :host()) with :has() ? For instance, like the following code snippets: :host:has([disabled]) { opacity: 0.75; } or :host(:has([disabled])) { opacity: 0.75; } Unfortunately, the opacity value doesn't seem ...

cssweb-componentcustom-element

Ways to activate a hover effect on an external element

Hello everyone! This is my first time posting here and I've been struggling to find a solution with my limited knowledge. I could really use some help on this: Is there a way to trigger a hover effect on an element that is not related (no parent, ch ...

htmlcsshover

Combining jquery and Bootstrap through Gulp

I have configured the gulp file below var gulp = require("gulp"); var del = require("del"); var concat = require("gulp-concat"); var uglify = require("gulp-uglify"); var sourcemaps = require("gulp-sourcemaps"); var rename = require("gulp-rename"); var pa ...

jquerygulpbundlebootstrap-4

Ensure that the headers of the table are properly aligned with the

Here's the code snippet I'm currently working with: function deleteRow(row) { var i = row.parentNode.parentNode.rowIndex - 2; // this -> td -> tr // -2 because the first 2 rows are used for header var tbl = docu ...

javascripthtmlcss

Contrasting the addition of an onClick listener through Jquery versus utilizing an HTML onclick attribute

I found this interesting piece of code that I want to share with you all: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery-1.12.4.js"></script> <title> HelloWorld JQuery </t ...

javascriptjqueryhtmlevent-handling

Transitioning opacity and visibility in iOS CSS styling

Check out this test on a desktop browser by visiting the following link (JSFiddle): a { background: gray; display: block; margin: 100px; padding: 100px; } a span { opacity: 0; -webkit-transition: 0.5s; visibility: hidden; } a:hover span { ...

cssiosmobilesafaricss-transitions

What is the reason for the absence of a shorthand property in CSS that combines width and height measurements?

Have you ever thought about using a shorter property for specifying an item's width and height in CSS? Currently, we have to write: selector {width: 100px; height: 250px;} While this is already pretty fast, wouldn't it be even quicker if we c ...

cssheightwidthshorthand

Struggling to align my overlay accurately by combining absolute and relative positioning

I'm currently tackling a frontend mentor project, and I've hit a roadblock trying to get my image overlay to position itself over the image rather than below it. I've set the parent position to relative and the overlay to absolute, but so fa ...

htmlcsscss-position

Using Vuejs to dynamically render raw HTML links as <router-link> elements

Hey there, I'm just getting started with VueJS and I've been doing some interesting experiments. I created a backend service using Python/Flask that provides me with a string of HTML code containing many tags. My goal is to render this HTML insid ...

javascripthtmlvue.jsfrontend

The <a> tag does not lead to a different webpage and cannot be clicked on

I have developed a web component that includes a method to generate a copyright string: '<p>Copyright © 2020 John Doe<a href="https://www.example.com">. Terms of Use</a></p>' After creating the string, I conver ...

javascripthtmltypescriptweb-component

What could be causing the div to move when in the hover state?

Can someone explain why my two divs are moving when I hover over them? HTML <div class="two"> <label class="one"> <input type="radio"> Sanjeev </label> </div> <div class="two"> <label class="one"> ...

htmlcss

Would you like to place some text within a content box?

I am facing a challenge where I want to insert content into a contentbar that has an opacity of 0.6. However, I do not want the content (such as text or videos) to have the same opacity as the contentbar. I attempted to place them in separate div tags with ...

htmlcss

What are the steps for positioning material-ui icons to the right?

I have a list that is dynamically generated with the following code snippet: <list className = "todos-list"> {allTodos.map((todo, index)=> { return ( ...

cssreactjsexpressmaterial-uiweb-development-server

Tips for placing a button beside text in a modal header with bootstrap

I am working on a modal header and trying to position the "download" button next to the text "Optimize data". Despite my efforts, the button always ends up below the modal header text. I have experimented with float and align properties, but haven't b ...

cssbootstrap-4

IE browser transparency effect on canvas

I have encountered an issue when drawing a shape on canvas using kineticJS and setting the fill to none. The code snippet I am using is below: var rect = new Kinetic.Path({ x: 0, y: 0, data: 'm 2.0012417,2.0057235 ...

javascripthtmlcanvastransparencykineticjs

Creating a dynamic linear gradient background color using Angular 2 binding

Using static values works perfectly <div style="background: linear-gradient(to right, #0000FF 0%, #0000FF 50%, #FFA500 50%, #FFA500 100%);"></div> in my TypeScript file. this.blueColor = '#0000FF'; this.orangColor = '#FFA500&a ...

htmlcssangular