Looking to create a unique triangular navigation bar for my website, but encountering issues when hovering over the divs. The triangle images have a square background, causing them to be selected as a group rather than individually. How can I ensure that only the image is hovered over, not the "background" div?
Created a visual aid to illustrate the problem: (hovering over the second image results in decreased opacity)
Any help on resolving this issue would be greatly appreciated.
To create a triangle effect using CSS, it's important to apply the border on hover as well.
Here is an example of how you can achieve this:
<div class="tri-wrap">
<div class="triangle up">
<div class="tri-text-up">design</div>
</div>
<div class="triangle down negativeM">
<div class="tri-text-down">hand
<br />made</div>
</div>
<div class="triangle up last negativeM">
<div class="tri-text-up txt-pad">illustration</div>
</div>
</div>
CSS Styling:
.tri-wrap {
margin: 1em auto;
width: 600px;
}
.triangle {
float: left;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
.down {
border-top: 120px solid #ee8172;
}
.up {
border-bottom: 120px solid #11b9a6;
}
.down:hover {
border-top: 120px solid #f2a698;
cursor: pointer;
}
.down:hover:hover > .tri-text-down {
display: block;
color: black;
font-family:"Century Gothic";
text-transform: uppercase;
}
.up:hover {
border-bottom: 120px solid #97c6c7;
cursor: pointer;
}
.up:hover:hover > .tri-text-up {
display: block;
color: black;
font-family:"Century Gothic";
text-transform: uppercase;
}
.tri-text-down {
margin: -6em -1.4em;
color: black;
display: none;
}
.tri-text-up {
margin: 4.1em -1.75em;
color: black;
display: none;
}
.txt-pad {
margin: 4.1em -3.1em;
color: black;
display: none;
}
.negativeM {
margin-left: -5em;
}
.last {
border-bottom: 120px solid #8393c9;
}
.last:hover {
border-bottom: 120px solid #c0b1d6;
color: black;
}
When creating a dynamic form in HTML using Laravel and then calling it through JQuery, I encountered an issue where the first form created showed an undefined form ID, but subsequent forms displayed their form IDs. How can this issue be resolved? Below i ...
I have implemented Simplexml within a class to load specific nodes from my xml file into html. <?xml version="1.0" encoding="UTF-8"?> <note> <item> <title>Reminder</title> </item> <item> ...
Problem with Bootstrap toggle not working on multiple identical inputs unless the first input is pressed. Even then, not all inputs are checked/unchecked. I've created a small example I want to ensure that when one input is toggled, all others have ...
Back in the IE6 days, I developed an old application that relies on frames instead of iframes and runs in quirks mode. Now, I'm wondering if it's possible to have one frame remain in quirks mode while another operates in standards mode when using ...
Can you help me with a task involving text inputs and links? <p><input type="text" name="color[]" value="orange" /> <a href="#" class="show-color">color</a><br /> <input type="text" name="color[]" value="purple" /> < ...
Is there a way to view partial HTML templates locally without copying them into the main index.html file? I'm looking for a solution that allows me to access my partial templates through a local URL without having to manually paste them into the main ...
Trying to find a specific report link but struggling with the generic information provided. The key lies in identifying a span element that can differentiate the link from the rest. Currently, I am using xpath's preceding-siblings method to locate the ...
I am currently working on a form that includes options for selecting a city and social networking site. The goal is to collect information about both the selected city and social network so that it can be stored for future reference. Upon submitting the fo ...
Can a unique identifier be assigned to each menu item generated using the <TablePagination> component? I would like to add a specific ID (e.g., id="menu_item_0", id="menu_item_1" & id="menu_item_2") to the menu item ...
I am trying to design a list item for a game that includes a background, an iconholder with an icon, a title, description, and up to three resources. I have been experimenting with Bootstrap and attempted using a container-fluid with an inner row but the i ...
I've been trying to set up a basic data table where the genus name in the "Coral_taxon" column is italicized, but the "spp." part following it remains lowercase. I thought of using the expression() function for each row in "Coral_taxon," but so far, I ...
I have spent approximately 2 hours searching and attempting over 15 solutions, but none of them have been successful. The issue involves a slick-slider structured as follows: <section id="testimonial-section" class="pt-4 pb-0 px-4 bg-dark text-white"&g ...
Initially, I believed that TinyMCE would remain unaffected by the Diazo theme. However, there seems to be some CSS creeping in from somewhere, causing certain functions to be more difficult to use. For instance, the line height on all the rows has drastica ...
After using the NPM link command to connect a locally developed package, I am encountering difficulties when trying to unlink it. My operating system is Windows 10. I have attempted the following solutions: npm unlink npm remove npm uninstall Completely ...
I have a scenario where I am rendering an array of items, each with a contenteditable field. MainComponent.js import { useState } from "react"; import Item from "./Item"; import "./styles.css"; export default function MainC ...
When I try to center align text in Safari 6.1/7.0 and add word-spacing, the text is centered as if the space between words is not included in the width calculation. For example, consider this CSS: div { width:300px; border: 1px solid #CCC; } h1 { ...
My tile div can be selected using the mouse or a timed event. Here are the states of selected and unselected : Not .selected .selected applied .tile { height: 70px; padding: 5px 10px 5px 10px; margin: 8px auto 0px auto; width: 280px; ...
I'm attempting to create a regular expression that can validate whether the URL entered by a user in a form is a valid Google Earth URL. For example: https://earth.google.com/web/@18.2209311,-63.06963893,-0.67163554a,2356.53661597d,34.99999967y,358.13 ...
As a newer Angular developer, I am embarking on the task of creating a web page that enables users to upload files, with the intention of storing them in a specific folder within the working directory. The current location of the upload page component is ...
Currently, I am facing an issue with setting the height and width attributes for an image as I do not have access to its dimensions from the server. One solution I am considering is setting both the width and height values to auto. For example: img { ...