Identifying rotated and overlapping DIV elements

I'm currently dealing with a table that is displayed in the jsFiddle link provided below. I want to achieve a highlight effect on the background color when hovering over it. While I have managed to make it work for the most part, there seems to be dead spots which I suspect are due to the overlapping of the box model as a result of rotating the divs 45 degrees.

View Example on jsFiddle :: When you mouse over the lower section of each header or any part of the last header, you'll notice the background lights up. However, there are some areas that don't respond as expected on the preceding headers.

<table>
  <thead>
  <tr>
    <th class="rotateHeader">
      <div>
        <span>This is my title</span>
      </div>
    </th>
    <th class="rotateHeader">
      <div>
        <span>This is my title</span>
      </div>
    </th>
    <th class="rotateHeader">
      <div>
        <span>This is my title</span>
      </div>
    </th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>100</td>
    <td>100</td>
    <td>100</td>
  </tr>
  </tbody>
</table>

If anyone has suggestions on how I can ensure the entire div of each header highlights when hovered over, please share your ideas!

htmlcss

Answer №1

It seems to be a common issue related to the z-index. Ensure that you are setting it correctly on the div elements, as otherwise the hover effect may start on the <th> tags.

* {padding: 0; margin: 0; box-sizing: border-box; }
table { border-collapse: collapse; margin: 10px; }

.rotateHeader {
  height: 100px;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  position: relative;
  vertical-align: bottom;
  padding: 0;
}

.rotateHeader > div {
  position: relative;
  z-index: 999;
  top: 0;
  left: 50px;
  height: 100%;
  -webkit-transform: skew(-45deg,0deg);
  -moz-transform: skew(-45deg,0deg);
  -ms-transform: skew(-45deg,0deg);
  -o-transform: skew(-45deg,0deg);
  transform: skew(-45deg,0deg);
  overflow: hidden;
  border-left: 1px solid #E34949;
  border-right: 1px solid #620F0F;
  border-top: 1px solid #620F0F;
  background-color: #b71c1c;
  color: #FFF;
}

.rotateHeader span {
  -webkit-transform: skew(45deg,0deg) rotate(315deg);
  -moz-transform: skew(45deg,0deg) rotate(315deg);
  -ms-transform: skew(45deg,0deg) rotate(315deg);
  -o-transform: skew(45deg,0deg) rotate(315deg);
  transform: skew(45deg,0deg) rotate(315deg);
  position: absolute;
  bottom: 30px; 
  left: -25px;
  display: inline-block;
  width: 85px;
  text-align: left;
  white-space: nowrap;
}

.rotateHeader > div:hover { background-color: #CE1F1F; cursor: pointer; }
<table>
  <thead>
    <tr>
      <th class="rotateHeader">
        <div>
          <span>This is my title</span>
        </div>
      </th>
      <th class="rotateHeader">
        <div>
          <span>This is my title</span>
        </div>
      </th>
      <th class="rotateHeader">
        <div>
          <span>This is my title</span>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>100</td>
      <td>100</td>
      <td>100</td>
    </tr>
  </tbody>
</table>

Answer №2

The issue lies in the fact that your th elements are not skewed, but their children are. If you hover over the top right of the first div, it works correctly. This is because that region represents where your th elements end. To solve this problem, you need to skew your th elements as well.

* {padding: 0; margin: 0; box-sizing: border-box; }
table { border-collapse: collapse; margin: 10px; margin-left: 50px; }

.rotateHeader {
  height: 100px;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  position: relative;
  vertical-align: bottom;
  padding: 0;
}
.rotateHeader{
  -webkit-transform: skew(-45deg,0deg);
  -moz-transform: skew(-45deg,0deg);
-ms-transform: skew(-45deg,0deg);
-o-transform: skew(-45deg,0deg);
transform: skew(-45deg,0deg);
}
  .rotateHeader > div {
    position: relative;
    top: 0;
    
    height: 100%;
   
overflow: hidden;
border-left: 1px solid #E34949;
border-right: 1px solid #620F0F;
border-top: 1px solid #620F0F;
background-color: #b71c1c;
    color: #FFF;
  }
  
  .rotateHeader span {
    -webkit-transform: skew(45deg,0deg) rotate(315deg);
-moz-transform: skew(45deg,0deg) rotate(315deg);
-ms-transform: skew(45deg,0deg) rotate(315deg);
-o-transform: skew(45deg,0deg) rotate(315deg);
transform: skew(45deg,0deg) rotate(315deg);
position: absolute;
bottom: 30px; 
left: -25px;
display: inline-block;
width: 85px;
text-align: left;
white-space: nowrap;
  }
  
  .rotateHeader:hover div { background-color: #CE1F1F; cursor: pointer; }
<table>
  <thead>
    <tr>
      <th class="rotateHeader">
        <div>
          <span>This is my title</span>
        </div>
      </th>
      <th class="rotateHeader">
        <div>
          <span>This is my title</span>
        </div>
      </th>
      <th class="rotateHeader">
        <div>
          <span>This is my title</span>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>100</td>
      <td>100</td>
      <td>100</td>
    </tr>
  </tbody>
</table>

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

Selenium error: element has become detached from the page and is no longer accessible

Currently, I am encountering an error while trying to display items extracted from websites, and I am seeking to understand the root cause of it. My preferred browser for this task is Google Chrome. chromeDriver.Navigate().GoToUrl("somewebsites"); chrome ...

c#htmlseleniumselenium-webdriverselenium-chromedriver

Designing a fresh look for the developer portal on Azure API Management Services

Is there a way to customize the color of the navbar links in the fresh developer portal for different layouts? I have attempted using the designer tool provided by the portal, but it hasn't yielded any results. I also tried cloning the git repository ...

cssazureazure-api-management

Having trouble with the clear button for text input in Javascript when using Bootstrap and adding custom CSS. Any suggestions on how to fix

My code was working perfectly until I decided to add some CSS to it. You can view the code snippet by clicking on this link (I couldn't include it here due to issues with the code editor): View Gist code snippet here The code is based on Bootstrap. ...

javascriptjqueryhtmlcsstwitter-bootstrap

Any ideas on how to present data in a card layout with two columns?

.card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.3s; } .card:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); } .container { padding: 2px 16px; } .card { width: 50%; heig ...

javascriptjqueryhtmlcss

Responsive Iframe设计

My website has an issue with making the iframe responsive. The map displays correctly on a computer, but is invisible on mobile phones. I am currently using Bootstrap for the layout. <div class="container d-none d-sm-block mb-5 pb-4"> <d ...

htmlcssdjangobootstrap-5

Nested arrays within an array in AngularJS can be displayed using ng-repeat

I am having trouble iterating over arrays within arrays. My goal is to create a vertical menu with button-like functionality, but I'm struggling to make it work. angular.module('NavigationApp',[]).controller('NavigationController&apo ...

javascripthtmlangularjsarrays

Use jQuery to easily add and remove rows from a table dynamically

Is there a way to dynamically add rows to an HTML table using jQuery by utilizing a popup window? The popup would contain text fields, checkboxes, radio buttons, and an "add" button. Upon clicking the "add" button, a new row would be added to the table. ...

javascriptjqueryhtml

Implement a hover animation for the "sign up" button using React

How can I add an on hover animation to the "sign up" button? I've been looking everywhere for a solution but haven't found anything yet. <div onClick={() => toggleRegister("login")}>Sign In</div> ...

javascriptcssreactjsonhover

Form that adjusts input fields according to the selected input value

I am in need of creating a dynamic web form where users can select a category and based on their selection, new input fields will appear. I believe this involves using JavaScript, but my searches on GitHub and Stack Overflow have not yielded a suitable sol ...

javascriptphpjqueryhtmlforms

Is there a problem with the drop-down menu not closing on WordPress?

I have successfully implemented a transition effect for the dropdown menu in my custom WordPress theme. However, I am facing an issue where the transition effect does not appear when the cursor moves away from the dropdown menu while closing. To see this i ...

csswordpresstwitter-bootstrap-3wordpress-theming

Elements that intersect in a site's adaptable layout

I need to create a design similar to this using HTML/CSS with the Skeleton framework: view design preview I've experimented with various methods to overlap the background and image, utilizing absolute positioning for the image. However, this approach ...

htmlcssoverlappingskeleton-css-boilerplateresponsive

Ways to create space between columns in a table

How can I achieve the table layout with a gap between columns, as shown in the design? Initially, I tried using border-collapse: separate but found it difficult to adjust borders in the tbody. So, I switched to collapse. Is this the right approach for crea ...

htmlcsssass

Customizing the Appearance of HtmlEditorExtender

Having an ajax HtmlEditorExtender featured on my webpage has been quite a challenge. I followed the instructions provided here: http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/HTMLEditorExtender/HTMLEditorExtender.aspx The issue arises from t ...

asp.netcssc#-4.0ajaxcontroltoolkit

The session becomes obsolete when redirecting back to the previous page

When attempting to redirect using the http referrer after storing a value in Session in php, I noticed that the Session becomes null. Is there a method to maintain the session even when utilizing the http referrer? ...

phphtmlsessionreferrer

YouTube playlists that are embedded do not function properly on iPads using the iOS operating system

While embedding a Youtube playlist, I have noticed that it works perfectly on regular desktop browsers, but not on iPad. After researching and reading various questions, I learned that Youtube can detect the client and provide an HTML5 version of the video ...

ioshtmlipadyoutubeyoutube-api

implementation of bug decrementation with a fadeout

For my current project, I need to implement a feature where individual elements containing a photo and their corresponding title fade out when clicked. However, the issue is that clicking on any picture fades out everything. How can I resolve this so only ...

javascripthtml

What is the best way to convert JavaScript to JSON in Python programming?

I encountered a situation where I have an HTML page that contains a lengthy product list, making it too large for me to upload. The products are stored within the script section of the page, specifically in one variable. Initially, I mistook this data for ...

javascriptpythonhtmljson

Is there a way to right-align the labels and input fields simultaneously?

Is there a way to line up the labels and inputs on the right side so they all appear in the same row? .radioContainer{ width: fit-content; margin: 5px; margin-top: 20px; background-color: aqua; padding-bottom: 25px; } <div class=" ...

htmlcss

When utilizing SVG 'use' icons with external references, Chrome may fail to display icons when viewing an HTML file locally

I'm currently experimenting with using SVG icons, following the guide found at https://css-tricks.com/svg-use-with-external-reference-take-2/ Here's how it appears: <!-- EXTERNAL reference --> <svg> <use xlink:href="sprite.svg# ...

htmlcssgoogle-chromesvg

The styling of one unordered list in CSS can be influenced by another unordered

I have been working on developing a menu that is split into three sections: Left Middle Right To achieve this, I utilized the following code snippet: JSFIDDLE However, I noticed that the left menu's layout was being impacted by the middle menu, d ...

javascriptjqueryhtmlcss