How do I ensure the CSS triangles maintain their correct boundaries when hovered over with the cursor?

Can the issue of incorrect triangle activation be fixed when hovering on http://jsfiddle.net/2AXhR/? Sometimes the wrong triangle is triggered due to the triangles' bounding areas being rectangles, causing overlap and z-index conflicts.

  <style type="text/css">
  .t {
     position:relative;
     top:55px;
     left:5px;
  }
  .t div {
     position:absolute;
     width: 0px;
     height: 0px;
     border-style: solid;
     border-width: 0 100px 173.2px 100px;
     border-color: transparent transparent #0079c5 transparent;
     transition:all 1s;
     -webkit-transition:all 1s;
     -moz-transition:all 1s;
     cursor:pointer;
     transform-origin:200px 173px;
     -webkit-transform-origin:200px 173px;
     -moz-transform-origin:200px 173px;
     z-index:10;
  }
  .t div:hover {
      z-index:20;
      border-color: transparent transparent #009cff transparent;
  }
  .t div:nth-child(1) {
     transform:rotate(30deg);
     -webkit-transform:rotate(30deg);
     -moz-transform:rotate(30deg);
  }
  .t div:nth-child(1):hover {
     transform:rotate(30deg) translate(-15%, -10%);
     -webkit-transform:rotate(30deg) translate(-15%, -10%);
     -moz-transform:rotate(30deg) translate(-15%, -10%);
  }
  .t div:nth-child(2) {
     transform:rotate(90deg);
     -webkit-transform:rotate(90deg);
     -moz-transform:rotate(90deg);
  }
  .t div:nth-child(2):hover {
     transform:rotate(90deg) translate(-15%, -10%);
     -webkit-transform:rotate(90deg) translate(-15%, -10%);
     -moz-transform:rotate(90deg) translate(-15%, -10%);
  }
  .t div:nth-child(3) {
     transform:rotate(150deg);
     -webkit-transform:rotate(150deg);
     -moz-transform:rotate(150deg);
  }
  .t div:nth-child(3):hover {
     transform:rotate(150deg) translate(-15%, -10%);
     -webkit-transform:rotate(150deg) translate(-15%, -10%);
     -moz-transform:rotate(150deg) translate(-15%, -10%);
  }
  .t div:nth-child(4) {
     transform:rotate(210deg);
     -webkit-transform:rotate(210deg);
     -moz-transform:rotate(210deg);
  }
  .t div:nth-child(4):hover {
     transform:rotate(210deg) translate(-15%, -10%);
     -webkit-transform:rotate(210deg) translate(-15%, -10%);
     -moz-transform:rotate(210deg) translate(-15%, -10%);
  }
  .t div:nth-child(5) {
     transform:rotate(270deg);
     -webkit-transform:rotate(270deg);
     -moz-transform:rotate(270deg);
  }
  .t div:nth-child(5):hover {
     transform:rotate(270deg) translate(-15%, -10%);
     -webkit-transform:rotate(270deg) translate(-15%, -10%);
     -moz-transform:rotate(270deg) translate(-15%, -10%);
  }
  .t div:nth-child(6) {
     transform:rotate(330deg);
     -webkit-transform:rotate(330deg);
     -moz-transform:rotate(330deg);
  }
  </style>

  <div class="t">
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
  </div>
javascripthtmlcsscss-shapes

Answer №1

----- Enhanced Version 2 (fixes bugs in IE and FF) -----

Resolved Issues :

  1. Resolved the problem of IE ignoring the overflow:hidden; property causing hover events to fire outside the visible triangles.
  2. Fixed the issue of random lines appearing on the triangles in Firefox.
  3. Cursor now reverts to default if placed between the triangles.

About :

This approach utilizes the skewX() property to craft the triangles. By using this method, there is no need for the "border trick" or the overflow property. This eliminates any overlapping elements, ensuring that hover events cannot simultaneously target two elements.

A secondary div conceals half of the skewed element to form the triangle, and it moves along with the element on hover using the + CSS selector.


----- VIEW DEMO V2 -----




HTML Markup :

<div class="t">
    <div class="wrap">
        <div class="triangle"></div>
        <div class="mask"></div>
    </div>
   <div class="wrap">
        <div class="triangle"></div>
        <div class="mask"></div>
    </div>
    <div class="wrap">
        <div class="triangle"></div>
        <div class="mask"></div>
    </div>
    <div class="wrap">
        <div class="triangle"></div>
        <div class="mask"></div>
    </div>
    <div class="wrap">
        <div class="triangle"></div>
        <div class="mask"></div>
    </div>
    <div class="wrap">
        <div class="triangle"></div>
        <div class="mask"></div>
    </div>
</div>

CSS Styling :

.t div{
    position:absolute;
    top:0; left:0;

    transform-origin:0 0;
    -ms-transform-origin:0 0;
    -webkit-transform-origin:0 0;

    transition:all 1s;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
}

.t .wrap{
    top:50%; left:50%;

    -ms-transform: skewX(30deg);
    -webkit-transform: skewX(30deg);
    transform: skewX(30deg);
}

.t .wrap .triangle {
    position:relative;
    width: 200px;
    height: 173px;
    background-color: #0079c5;
    cursor:pointer;
    z-index:1;
}
.t .wrap .mask{
    width:100%;
    height:115.5%;
    background-color: #fff;
    left:100%;
    z-index:2;

    -ms-transform: skewX(-30deg) rotate(30deg);
    -webkit-transform: skewX(-30deg) rotate(30deg);
    transform: skewX(-30deg) rotate(30deg);
} 

.t .wrap .triangle:hover{
    background-color: #009cff;

    transform:  translate(10%, 10%);
    -webkit-transform: translate(10%, 10%);
    -moz-transform: translate(10%, 10%);
}

.t .triangle:hover + .mask{
    -ms-transform: skewX(-30deg) rotate(30deg) translate(17.5%, 0);
    -webkit-transform: skewX(-30deg) rotate(30deg) translate(17.5%, 0);
    transform: skewX(-30deg) rotate(30deg) translate(17.5%, 0);
}

.t > div:nth-child(2){
    -ms-transform: rotate(60deg) skewX(30deg);
    -webkit-transform: rotate(60deg) skewX(30deg);
    transform: rotate(60deg) skewX(30deg);
}
.t > div:nth-child(3){
    -ms-transform: rotate(120deg) skewX(30deg);
    -webkit-transform: rotate(120deg) skewX(30deg);
    transform: rotate(120deg) skewX(30deg);
}

.t > div:nth-child(4){
    -ms-transform: rotate(-60deg) skewX(30deg);
    -webkit-transform: rotate(-60deg) skewX(30deg);
    transform: rotate(-60deg) skewX(30deg);
}
.t > div:nth-child(5){
    -ms-transform: rotate(-120deg) skewX(30deg);
    -webkit-transform: rotate(-120deg) skewX(30deg);
    transform: rotate(-120deg) skewX(30deg);
}
.t > div:nth-child(6){
    -ms-transform: rotate(-180deg) skewX(30deg);
    -webkit-transform: rotate(-180deg) skewX(30deg);
    transform: rotate(-180deg) skewX(30deg);
}



Original Version 1 : VIEW DEMO V1

Answer №2

Here's a fresh perspective on the issue, completely sidestepping any boundary concerns.

It's important to note that while this method may not fully replicate the hover effect you were aiming for, I am currently exploring alternative solutions.

SEE EXAMPLE HERE - Functions as intended in Firefox and Chrome but encounters issues in IE11.

HTML

<div class="t">
    <div class="clip">
        <div class="triangle"></div>
    </div>
    <div class="clip">
        <div class="triangle"></div>
    </div>
    <div class="clip">
        <div class="triangle"></div>
    </div>
    <div class="clip">
        <div class="triangle"></div>
    </div>
    <div class="clip">
        <div class="triangle"></div>
    </div>
    <div class="clip">
        <div class="triangle"></div>
    </div>
</div>

CSS

.t {
    width:500px;
    height:500px;
    position:relative;
}
.t > .clip {
    overflow: hidden;
    position: absolute;
    width: 50%;
    height: 50%;
    -webkit-transform-origin: 100% 100%;
}
.t > .clip:first-child {
    -webkit-transform: rotate(60deg) skewY(30deg);
}
.t > .clip:nth-child(2) {
    -webkit-transform: rotate(120deg) skewY(30deg);
}
.t > .clip:nth-child(3) {
    -webkit-transform: rotate(180deg) skewY(30deg);
}
.t > .clip:nth-child(4) {
    -webkit-transform: rotate(240deg) skewY(30deg);
}
.t > .clip:nth-child(5) {
    -webkit-transform: rotate(300deg) skewY(30deg);
}
.t > .clip:nth-child(6) {
    -webkit-transform: rotate(360deg) skewY(30deg);
}
.triangle {
    width: 200%;
    height: 200%;
    -webkit-transform: skewY(-42deg) skewX(-20deg) rotate(-15.5deg);
    background:#0079c5;
}
.triangle:hover {
    background:#009cff;
}

Answer №3

After tackling the issue independently, I managed to find a solution. Utilizing JavaScript, I implemented a hover event for each triangle. Upon hovering, I adjusted the z-index values accordingly: the hovered triangle to 20, the next one to 21, and the rest to 19.

Here's a snippet of the relevant code:

  self.e.find(".t div").hover(
  function() {
     $(this).css({
        'z-index': 20,
        'border-color': "transparent transparent "+self.params['colorSelected']+" transparent"
     });
     if($(this).next().length) {
        $(this).next().css("z-index", 21);
     } else {
        self.e.find(".t div").first().css("z-index", 21);
     }
  }, 
  function() {
     self.e.find(".t div").css({
        'z-index': 19,
        'border-color': "transparent transparent "+self.params['color']+" transparent"
     });
  });

The effectiveness of this method stems from the sequential arrangement of the triangles, starting from the top left and moving clockwise. By adjusting the z-index of each triangle's neighbor, the overlapping issue is rectified, ensuring the correct definition of the triangles.

For a visual comparison of the hover behavior, explore these two JSFiddles:

Unsolved: http://jsfiddle.net/2AXhR/

Solved: http://jsfiddle.net/2AXhR/1/

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

Binding HTML Elements to JavaScript Values

Currently, I am working on a project with .Net and Vue. However, I am facing an issue in binding a value in a label. <li v-for="restaurant in vHolidays.data" > <form id="1"> <div> ...

htmlvue.js

Guide on inserting tooltip to designated header column in primeNG data table

Html <p-table #dt1 [columns]="cols" [value]="cars1"> <ng-template pTemplate="header" let-columns> <tr> <th *ngFor="let col of columns"> {{col.header}} </th> ...

htmlangulartypescriptprimengprimeng-datatable

Utilizing conditional statements within the array.forEach method to select specific sub-objects within an array of objects

Need help troubleshooting an if statement inside a function that is called by a forEach array loop. My array contains objects, with each object structured like this: arrofobj = [ {"thing_id":"1a", "val": 1, "Type": "Switch","ValType":{"0":"Open","1":" ...

javascriptarraysjsonforeachnode-red

The significance of 'this' in an Angular controller

Forgive me for what may seem like a silly question, but I believe it will help clarify my understanding. Let's dive into JavaScript: var firstName = "Peter", lastName = "Ally"; function showFullName () { // The "this" inside this func ...

javascriptangularjs

A web application using JavaScript and Node.js with a focus on creating a REST

After extensive research, I am eager to develop a web application using JavaScript and Node.js with an SQL back-end. However, the abundance of frameworks and tools available has left me feeling overwhelmed. While I have identified some that I would like to ...

javascriptjquerynode.jstwitter-bootstrapweb-applications

The package 'models' imported from is not found [ERR_MODULE_NOT_FOUND] error

I'm currently in the process of setting up my project to utilize absolute imports. To accomplish this, I've made adjustments to my jsconfig.json file as shown below: { "compilerOptions": { "baseUrl": "./src&quo ...

javascriptnode.jsvscode-jsconfig

Using a Dynamic Function to Replace the jQuery Global Object Variable

In a global object, there are settings that need to be updated based on user input. For instance, if "no" is selected for div 1, not only will div-one be hidden, but the variable's value will also change to 0. The problem lies in the dynamic function ...

javascriptjqueryhtml

When I click a button in d3 to refresh the data on my bar graph, the text fails to update accordingly

I've successfully created a series of data lists that modify the bargraph. Unfortunately, due to their differing x and y values, they end up printing new values on top of existing ones. Shown below is an image illustrating the issue where x and y val ...

javascripthtmljsond3.js

Tips for enhancing image resolution when converting from canvas toDataURL

After grabbing an image from a DIV with HTML2CANVAS, I noticed that the image quality is disappointingly poor and pixelated. The resolution of the captured image is only 96 dpi. Is there a way to boost the resolution for a clearer, high-quality image? Cou ...

javascriptasp.netcanvashtml2canvas

Determining the page's coordinates in ColdFusion

Whenever I use iframes or frames on older websites, I implement an additional security measure using a JavaScript function: <SCRIPT LANGUAGE="JavaScript1.1"> if (top == self) self.location.href = "../index.cfm"; </SCRIPT> I also include an ...

javascriptcoldfusion

Creating layers of object declarations

Looking for assistance on the code snippet below. type Item = { id: number; size: number; } type Example = { name: string; items: [ Item ]; } var obj: Example = { name: "test", items: [ { i ...

javascriptreactjstypescriptreact-native

Is there a way to position text at the bottom of a card?

Looking to showcase multiple articles on a single page? I utilized Bootstrap 5 cards to create a visually appealing layout. While everything turned out as I hoped, the only issue I'm facing is that the "read more" link is not positioned at the bottom ...

htmlcsstwitter-bootstrapbootstrap-5card

How can I add an object to an array of objects in Vue.js?

Hey there! I'm new to Vue and currently working on understanding the whole concept of Vue and how to use it. Right now, my focus is on learning lists. JS: Vue.config.productionTip = false; new Vue({ el: '#app', data: { items: [ ...

javascriptarraysvue.js

Challenges in using HAML5 Canvas for mathematical applications

Hey there! I'm currently working on utilizing the canvas element to form various shapes, but I've encountered a few challenges when it comes to the mathematical aspect. Issue 1: I need to calculate an angle that is relative to the preceding line ...

javascripthtmlcanvas

JavaScript Ext is not declared

I've designed a webpage with tabs, and everything was working fine in our development environment. However, when we moved it to the staging environment, we started experiencing errors this morning that I'm not sure how to resolve as my JavaScript ...

javascriptdom-events

Creating a CSS selector element with an index is a useful skill to have when

Currently, I am in the process of developing a test application using Selenium that relies on CSS Selectors or XPath strings. One specific challenge I encountered was testing menu items that only appear upon hovering. When utilizing "Inspect Element" in bo ...

javascriptjqueryseleniumjquery-selectorscss-selectors

Converting Byte strings to Byte arrays in Node.js using JavaScript

Currently facing a challenge while trying to complete the pythonchallenge using JS and Node. Stuck on challenge 8 where I need to decompress a string using bzip2: BZh91AY&SYA\xaf\x82\r\x00\x00\x01\x01\x80\x ...

javascriptpythonnode.jsbzip2

Utilizing AngularJS to bind form fields with select boxes to enable synchronized data. Modifying the selection in the dropdown should dynamically

Currently, I am working on an input form that involves a select with various options. Depending on the user's selection, three additional fields need to be populated accordingly. For instance: If the user picks Option1, then the three other fields s ...

javascriptangularjs

Creating two columns with separate scrollbars in Responsive Bootstrap is a useful feature for organizing content in a visually

Is there a way to create 2 columns with scrollbars using Bootstrap when a button is clicked? Here's what I'm trying to achieve: My webpage consists of a row-fluid div that contains the main-column div with main-content and extra-content. There&a ...

jquerycsstwitter-bootstrapresponsive-designsass

Saving the execution of a function within an array

Creating a JavaScript program where function calls that generate 3D objects will be stored in an array is my current project. Specifically, I aim to include the following function calls: draw_cylinder(0,0,3,2); draw_sphere(0,0,5,3); draw_cone(17,0,7,3); d ...

javascriptarrays