CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
Larry Miles
Larry Miles

Reputation: 11

Creating focus on element that's behind a different element

all. I'm a beginner trying to create my own website.

For an input field, I want the text to appear behind horizontal lines. To achieve this, I created a container div element with many sub divs each two pixels high with a bottom border of one pixel, then placed the container div in front of the input field.

The problem is that when hovering over the input field, the cursor only changes into the "text" style cursor in the small area at the very left edge of the input field not covered by the horizontal lines created by the sub div elements.

What I would like to happen, and I fear I may need Javascript, is to have the cursor, when hovering over the container div's horizontal lines, turn into the "text" cursor and when clicked for the focus to activate within the input field.

I hope my question isn't confusing. Thank you in advance.

Upvotes: 1

Views: 550

Answers (2)

Matt Mokary
Matt Mokary

Reputation: 727

Add this CSS to your div with horizontal lines:

pointer-events: none;

This indicates that your div element should not become the target of mouse events, effectively letting them "pass through" it.

For more information, see the MDN article on pointer-events.

Upvotes: 3

JakAttk123
JakAttk123

Reputation: 1806

Assuming that I'm understanding your question, you do need to use JavaScript. Using jQuery you can do the following: 

$('.horizontalLines').click(function() {
    $('.inputField').focus();
});

This just makes it so that clicking one div will select the text input box.

Upvotes: 0

Related Questions