trigger css:hover on its line-height area only
I am building a map with some arrows on it, these arrow trigger some actions when the user click them.
I am using a character similar to this one ^ to draw the arrows, what I want is to change its color when user moves the mouse over it. What I need is to avoid triggering the event when the mouse hovers under the character, I made the line-height property smaller and added some padding on the top, so the background area is adjusted to cover the character shape only, it looks something like this:
The background area has its height reduced
The problem is the :hover, it continues triggering on the "Original Character area", it is ignoring the line-height property, if you move the mouse under the colored area it will trigger the hover and change the text color.
I need the :hover property to trigger on the text line-height or the colored background only.
Is this possible?
div{
color: white;
font-size: 40px;
line-height: 5px;
background-color: red;
padding-top: 12px;
width: 20px;
}
div:hover{
color:black;
}<div>^</div>html css hover
asked Nov 14 '18 at 18:00
straminstramin
407420
add a comment |
I am building a map with some arrows on it, these arrow trigger some actions when the user click them.
I am using a character similar to this one ^ to draw the arrows, what I want is to change its color when user moves the mouse over it. What I need is to avoid triggering the event when the mouse hovers under the character, I made the line-height property smaller and added some padding on the top, so the background area is adjusted to cover the character shape only, it looks something like this:
The background area has its height reduced
The problem is the :hover, it continues triggering on the "Original Character area", it is ignoring the line-height property, if you move the mouse under the colored area it will trigger the hover and change the text color.
I need the :hover property to trigger on the text line-height or the colored background only.
Is this possible?
div{
color: white;
font-size: 40px;
line-height: 5px;
background-color: red;
padding-top: 12px;
width: 20px;
}
div:hover{
color:black;
}<div>^</div>html css hover
asked Nov 14 '18 at 18:00
straminstramin
407420
add a comment |
I am building a map with some arrows on it, these arrow trigger some actions when the user click them.
I am using a character similar to this one ^ to draw the arrows, what I want is to change its color when user moves the mouse over it. What I need is to avoid triggering the event when the mouse hovers under the character, I made the line-height property smaller and added some padding on the top, so the background area is adjusted to cover the character shape only, it looks something like this:
The background area has its height reduced
The problem is the :hover, it continues triggering on the "Original Character area", it is ignoring the line-height property, if you move the mouse under the colored area it will trigger the hover and change the text color.
I need the :hover property to trigger on the text line-height or the colored background only.
Is this possible?
div{
color: white;
font-size: 40px;
line-height: 5px;
background-color: red;
padding-top: 12px;
width: 20px;
}
div:hover{
color:black;
}<div>^</div>html css hover
asked Nov 14 '18 at 18:00
straminstramin
407420
I am building a map with some arrows on it, these arrow trigger some actions when the user click them.
I am using a character similar to this one ^ to draw the arrows, what I want is to change its color when user moves the mouse over it. What I need is to avoid triggering the event when the mouse hovers under the character, I made the line-height property smaller and added some padding on the top, so the background area is adjusted to cover the character shape only, it looks something like this:
The background area has its height reduced
The problem is the :hover, it continues triggering on the "Original Character area", it is ignoring the line-height property, if you move the mouse under the colored area it will trigger the hover and change the text color.
I need the :hover property to trigger on the text line-height or the colored background only.
Is this possible?
div{
color: white;
font-size: 40px;
line-height: 5px;
background-color: red;
padding-top: 12px;
width: 20px;
}
div:hover{
color:black;
}<div>^</div>div{
color: white;
font-size: 40px;
line-height: 5px;
background-color: red;
padding-top: 12px;
width: 20px;
}
div:hover{
color:black;
}<div>^</div>div{
color: white;
font-size: 40px;
line-height: 5px;
background-color: red;
padding-top: 12px;
width: 20px;
}
div:hover{
color:black;
}<div>^</div>html css hover
html css hover
asked Nov 14 '18 at 18:00
straminstramin
407420
asked Nov 14 '18 at 18:00
straminstramin
407420
asked Nov 14 '18 at 18:00
straminstramin
407420
asked Nov 14 '18 at 18:00
straminstramin
407420
asked Nov 14 '18 at 18:00
straminstramin
407420
407420
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
The answer is more simple than you think: you have an overflow that you need to hide. Decreasing the line-height will indeed decrease the line-box (the height you want) but will not change the height of the character that will overflow:
div {
color: white;
font-size: 40px;
line-height: 5px;
background-color: red;
padding-top: 12px;
width: 20px;
overflow: hidden;
}
div:hover {
color: black;
}<div>^</div>answered Nov 14 '18 at 19:46
Temani AfifTemani Afif
74.2k94386
add a comment |
That's weird indeed.
As a solution, we can just completely remove the mouse events on the div itself, and mimic the div with a pseudo-element (and so the :hover will trigger on the pseudo-element rather than the actual div itself).
div{
color: white;
font-size: 40px;
line-height:5px;
background-color: red;
padding-top: 12px;
width: 20px;
height:5px;
pointer-events:none;
position:relative;
}
div::after{
width:100%;
height:100%;
display:block;
position:absolute;
top:0;
left:0;
content:"";
pointer-events:all;
}
div:hover{
color:black;
}<div>^</div>answered Nov 14 '18 at 18:13
Peter McLaughlinPeter McLaughlin
514
not weird, it's as simple overflow
– Temani Afif
Nov 14 '18 at 20:41
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53306243%2ftrigger-csshover-on-its-line-height-area-only%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
The answer is more simple than you think: you have an overflow that you need to hide. Decreasing the line-height will indeed decrease the line-box (the height you want) but will not change the height of the character that will overflow:
div {
color: white;
font-size: 40px;
line-height: 5px;
background-color: red;
padding-top: 12px;
width: 20px;
overflow: hidden;
}
div:hover {
color: black;
}<div>^</div>answered Nov 14 '18 at 19:46
Temani AfifTemani Afif
74.2k94386
add a comment |
The answer is more simple than you think: you have an overflow that you need to hide. Decreasing the line-height will indeed decrease the line-box (the height you want) but will not change the height of the character that will overflow:
div {
color: white;
font-size: 40px;
line-height: 5px;
background-color: red;
padding-top: 12px;
width: 20px;
overflow: hidden;
}
div:hover {
color: black;
}<div>^</div>answered Nov 14 '18 at 19:46
Temani AfifTemani Afif
74.2k94386
add a comment |
The answer is more simple than you think: you have an overflow that you need to hide. Decreasing the line-height will indeed decrease the line-box (the height you want) but will not change the height of the character that will overflow:
div {
color: white;
font-size: 40px;
line-height: 5px;
background-color: red;
padding-top: 12px;
width: 20px;
overflow: hidden;
}
div:hover {
color: black;
}<div>^</div>answered Nov 14 '18 at 19:46
Temani AfifTemani Afif
74.2k94386
The answer is more simple than you think: you have an overflow that you need to hide. Decreasing the line-height will indeed decrease the line-box (the height you want) but will not change the height of the character that will overflow:
div {
color: white;
font-size: 40px;
line-height: 5px;
background-color: red;
padding-top: 12px;
width: 20px;
overflow: hidden;
}
div:hover {
color: black;
}<div>^</div>div {
color: white;
font-size: 40px;
line-height: 5px;
background-color: red;
padding-top: 12px;
width: 20px;
overflow: hidden;
}
div:hover {
color: black;
}<div>^</div>div {
color: white;
font-size: 40px;
line-height: 5px;
background-color: red;
padding-top: 12px;
width: 20px;
overflow: hidden;
}
div:hover {
color: black;
}<div>^</div>answered Nov 14 '18 at 19:46
Temani AfifTemani Afif
74.2k94386
answered Nov 14 '18 at 19:46
Temani AfifTemani Afif
74.2k94386
answered Nov 14 '18 at 19:46
Temani AfifTemani Afif
74.2k94386
answered Nov 14 '18 at 19:46
Temani AfifTemani Afif
74.2k94386
74.2k94386
add a comment |
add a comment |
That's weird indeed.
As a solution, we can just completely remove the mouse events on the div itself, and mimic the div with a pseudo-element (and so the :hover will trigger on the pseudo-element rather than the actual div itself).
div{
color: white;
font-size: 40px;
line-height:5px;
background-color: red;
padding-top: 12px;
width: 20px;
height:5px;
pointer-events:none;
position:relative;
}
div::after{
width:100%;
height:100%;
display:block;
position:absolute;
top:0;
left:0;
content:"";
pointer-events:all;
}
div:hover{
color:black;
}<div>^</div>answered Nov 14 '18 at 18:13
Peter McLaughlinPeter McLaughlin
514
not weird, it's as simple overflow
– Temani Afif
Nov 14 '18 at 20:41
add a comment |
That's weird indeed.
As a solution, we can just completely remove the mouse events on the div itself, and mimic the div with a pseudo-element (and so the :hover will trigger on the pseudo-element rather than the actual div itself).
div{
color: white;
font-size: 40px;
line-height:5px;
background-color: red;
padding-top: 12px;
width: 20px;
height:5px;
pointer-events:none;
position:relative;
}
div::after{
width:100%;
height:100%;
display:block;
position:absolute;
top:0;
left:0;
content:"";
pointer-events:all;
}
div:hover{
color:black;
}<div>^</div>answered Nov 14 '18 at 18:13
Peter McLaughlinPeter McLaughlin
514
not weird, it's as simple overflow
– Temani Afif
Nov 14 '18 at 20:41
add a comment |
That's weird indeed.
As a solution, we can just completely remove the mouse events on the div itself, and mimic the div with a pseudo-element (and so the :hover will trigger on the pseudo-element rather than the actual div itself).
div{
color: white;
font-size: 40px;
line-height:5px;
background-color: red;
padding-top: 12px;
width: 20px;
height:5px;
pointer-events:none;
position:relative;
}
div::after{
width:100%;
height:100%;
display:block;
position:absolute;
top:0;
left:0;
content:"";
pointer-events:all;
}
div:hover{
color:black;
}<div>^</div>answered Nov 14 '18 at 18:13
Peter McLaughlinPeter McLaughlin
514
That's weird indeed.
As a solution, we can just completely remove the mouse events on the div itself, and mimic the div with a pseudo-element (and so the :hover will trigger on the pseudo-element rather than the actual div itself).
div{
color: white;
font-size: 40px;
line-height:5px;
background-color: red;
padding-top: 12px;
width: 20px;
height:5px;
pointer-events:none;
position:relative;
}
div::after{
width:100%;
height:100%;
display:block;
position:absolute;
top:0;
left:0;
content:"";
pointer-events:all;
}
div:hover{
color:black;
}<div>^</div>div{
color: white;
font-size: 40px;
line-height:5px;
background-color: red;
padding-top: 12px;
width: 20px;
height:5px;
pointer-events:none;
position:relative;
}
div::after{
width:100%;
height:100%;
display:block;
position:absolute;
top:0;
left:0;
content:"";
pointer-events:all;
}
div:hover{
color:black;
}<div>^</div>div{
color: white;
font-size: 40px;
line-height:5px;
background-color: red;
padding-top: 12px;
width: 20px;
height:5px;
pointer-events:none;
position:relative;
}
div::after{
width:100%;
height:100%;
display:block;
position:absolute;
top:0;
left:0;
content:"";
pointer-events:all;
}
div:hover{
color:black;
}<div>^</div>answered Nov 14 '18 at 18:13
Peter McLaughlinPeter McLaughlin
514
answered Nov 14 '18 at 18:13
Peter McLaughlinPeter McLaughlin
514
answered Nov 14 '18 at 18:13
Peter McLaughlinPeter McLaughlin
514
answered Nov 14 '18 at 18:13
Peter McLaughlinPeter McLaughlin
514
514
not weird, it's as simple overflow
– Temani Afif
Nov 14 '18 at 20:41
add a comment |
not weird, it's as simple overflow
– Temani Afif
Nov 14 '18 at 20:41
not weird, it's as simple overflow
– Temani Afif
Nov 14 '18 at 20:41
not weird, it's as simple overflow
– Temani Afif
Nov 14 '18 at 20:41
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53306243%2ftrigger-csshover-on-its-line-height-area-only%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
