Create a triangular shaped division element to contain text and automatically close when the user moves the cursor away

Is there a way to create a triangular div that can display text and images?

I tried this method, but the issue I'm facing is that when the div opens on hover, it doesn't close properly when I hover out. Since the div is in a square shape, how can I ensure that it closes as soon as the user hovers out?

I am open to using jQuery for this solution as well.

CSS

.map {
    background-color: transparent;
    position: absolute;
    border-top: 0px;
    border-right: 500px solid transparent;
    border-left: 0;
    border-bottom: 500px solid #ff0000;
    width: 0;
    position: fixed;
    bottom: -440px;
}

.map:hover {
    bottom: 0px;
}

Another demo

javascriptjqueryhtmlcss

Answer №1

When you examine the element in Chrome, you will notice that despite using borders to create the effect, the div remains a square. Upon hovering over it, the bottom left 500x500 pixels are covered.

To achieve your desired outcome, you may want to track the mouse coordinates accordingly.

$(".map").click(function(e){
   var parentOffset = $(this).parent().offset(); 
   //or $(this).offset(); if you really just want the current element's offset
   var relX = e.pageX - parentOffset.left;
   var relY = e.pageY - parentOffset.top;
});

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

Creating a concatenated multidimensional array can be achieved by combining multiple arrays of varying lengths into a single multidimensional array

Is there a way to transform array a into array b? Alternatively, how can I create a matrix-style multidimensional array using the values from array a below? SPECIFICATIONS: 1. The length of array a is variable. 2. Each element in array a has a variable l ...

javascriptarraysmultidimensional-array

Creating an unordered list navigation using jQuery and JSON data

Help needed in creating a dynamic menu using ul and li tags. The menu structure will be based on JSON retrieved from the web server. How can I implement this menu with jQuery? var data = [ { "MenuId": "4fde524c-9f8e-4fc4-a7c1-aea177090299", "Par ...

jqueryjsontwitter-bootstrap-3

Fulfill a promise based on a particular event in Puppeteer

I am looking for a way to seamlessly continue my puppeteer code after a particular event occurs. Specifically, I need guidance on how to handle the 'request' event in a synchronous manner. Here is an example of the event code: await page.on(&apo ...

javascriptnode.jsajaxpuppeteer

useEffect initiates all actions

I'm currently exploring hooks functionality within a Next.JS project. I've successfully used a useEffect to track scrolling behavior in order to dynamically change the content displayed in a header when the page is scrolled. const [ scrollY, setS ...

javascriptreactjsreact-hooksnext.jsuse-effect

jQuery hide() blink

I am currently working on a PHP script that performs validation on a form with various inputs. My goal is to hide the errors initially and then have them fade in gradually when the page reloads, rather than abruptly appearing all at once. However, I' ...

phpjqueryhideflicker

Updating v-model with inputs is proving to be a difficult task

Creating object instances as responses can be done like this: <el-input :id="'question_' + question.id" v-model="answers[question.id]"></el-input> When entering data into these inputs, the output will look something like this: Answ ...

javascriptvue.jsvuejs2

Optimized Handlebars template using RequireJS

I recently precompiled a handlebars template manually and saved it as "testTemplate.handlebars." Now, in my code using requireJS and Backbone, I have the following function: define(['text!../templates/testTemplate.handlebars' ],function( ...

javascriptbackbone.jsrequirejshandlebars.jsprecompiled-templates

Tips on viewing a PDF document directly in the browser instead of saving it to your device

I have a unique api that returns a json-object containing a link to a pdf { pdf_link: 'http://uniqueurl.com/logs.pdf' } My goal is to open this pdf in a separate browser tab when the user clicks on the file name. I attempted to use the url as a ...

javascriptreactjspdfdownloadblob

AngularJS: Understanding the 'controller as' syntax and the importance of $watch

Is it possible to subscribe to property changes when using the controller as syntax? controller('TestCtrl', function ($scope) { this.name = 'Max'; this.changeName = function () { this.name = new Date(); } // not working ...

javascriptangularjsangularjs-scopeng-controller

Expanding section beneath a Row in a Table (Semantic UI React)

I'm attempting to implement expandable Table Rows in a Table that can be activated by clicking on them individually. For instance, upon clicking on the designated area in the provided image below, a Segment or Container will reveal itself with embedd ...

htmlcssnode.jsreactjssemantic-ui-react

Checking to see if all the users mentioned in the message have been assigned a role

Hello everyone, I'm new to asking questions here so please bear with me. I am trying to retrieve all the users mentioned in a message and check if any of them have a specific role, such as the staff role. Thank you for your help! Edit: Here is the ...

javascriptdiscord.js

Find all elements located in between two headers with varying ids

I am trying to select a specific range of elements in between two headers, excluding everything after the second header. For example, I want to select elements 1-5 from the following code snippet: <!DOCTYPE html> <html> <head> <link r ...

csscss-selectors

Utilizing "this" in a situation where the function and selector are not combined

When it comes to utilizing this in different scenarios, the results may vary. In example 1, we see that by directly accessing this, we are able to obtain the correct result. $("#my_div").on("click", function () { alert( $(this).attr("id") ) }); Howev ...

javascriptjquery

Error: The server selection process has encountered an unexpected issue

Embarking on my journey with MongoDB and the MERN stack, I turned to these tutorials for guidance: https://medium.com/@beaucarnes/learn-the-mern-stack-by-building-an-exercise-tracker-mern-tutorial-59c13c1237a1 https://www.youtube.com/watch?v=7CqJlxBYj-M ...

javascriptnode.jsmongodbexpressmongoose

How can you ensure that an image reaches its full width and height without sacrificing its aspect ratio?

Is there a way to resize an image within its container without sacrificing its aspect ratio? It needs to work in IE9 and I can't use background images or JavaScript. In my example, both images are smaller than the container but some may be larger and ...

css

"Unstable Page Refreshes: The issue of flickering in Laravel 5.3 with Vue 2

Each time I refresh my page, instead of seeing my Vue content, it appears briefly and then disappears (flickers). This is my app.js file: require('./bootstrap'); var Vue = require('vue'); new Vue({ el: '#root', data: { ...

javascriptlaravelvue.jsflicker

I am attempting to insert the following script to display a list of products, but after adding it, the menu bar seems to be malfunctioning

Can you help with an issue regarding the menu bar's functionality? The code snippet below is meant to list some elements but seems to be causing problems with the menu bar. <script type="text/javascript" src="http://code.jquery.com/jquery- ...

javascripthtml

Creating unique CSS styles through randomly generated values for both the left and top positions each time the page is refreshed or loaded

I have multiple draggable frames within my HTML, each with unique "left" and "top" values in the CSS. I am looking to randomize these values every time the page is refreshed or loaded, with a range of 10 to 1000 pixels. Here is an example of the CSS for o ...

javascripthtmlcssless

Troubleshooting problem with CSS layout when adjusting the height of a section

I recently delved into creating a simple website using HTML5 and have successfully set up the site structure. Everything has been smooth sailing so far. However, I've encountered a section of the site that seems to have a mind of its own. When I ass ...

csshtml

Arranging objects in an array according to a predetermined criteria

Presented below is an array: [{"cod_nivel":"INC2","cod_modelo":"D"}, {"cod_nivel":"PRIM1","cod_modelo":"B"}, {"cod_nivel":"INC2","cod_modelo":"B"}, {"cod_nivel":"INC1","cod_modelo":"D"}, {"cod_nivel":"PRIM1" ...

javascriptarraysjsonsorting