When I add a SVG with fixed positioning my form and hover states on my button stop working
I have a link here to https://codepen.io/PhysicsKid/pen/gQXPPZ.
svg {
position: fixed;
bottom: 0;
right: 0;
}
This is they styling that I have on the SVG. I have a hover state for the submit button also.
button:hover {
color: white;
background-color: dodgerblue;
border: 3px solid white;
}
When I comment out the SVG the form and the hover state both work. I am not sure what is causing the problem. I think the SVG might be covering the other elements so that they can not be selected but if that is the case I do not know how to fix it. Any help would be greatly appreciated.
html css forms svg
edited Nov 19 '18 at 18:27
James Ives
1,76811433
asked Nov 19 '18 at 18:23
M. CarrM. Carr
1015
add a comment |
I have a link here to https://codepen.io/PhysicsKid/pen/gQXPPZ.
svg {
position: fixed;
bottom: 0;
right: 0;
}
This is they styling that I have on the SVG. I have a hover state for the submit button also.
button:hover {
color: white;
background-color: dodgerblue;
border: 3px solid white;
}
When I comment out the SVG the form and the hover state both work. I am not sure what is causing the problem. I think the SVG might be covering the other elements so that they can not be selected but if that is the case I do not know how to fix it. Any help would be greatly appreciated.
html css forms svg
edited Nov 19 '18 at 18:27
James Ives
1,76811433
asked Nov 19 '18 at 18:23
M. CarrM. Carr
1015
add a comment |
I have a link here to https://codepen.io/PhysicsKid/pen/gQXPPZ.
svg {
position: fixed;
bottom: 0;
right: 0;
}
This is they styling that I have on the SVG. I have a hover state for the submit button also.
button:hover {
color: white;
background-color: dodgerblue;
border: 3px solid white;
}
When I comment out the SVG the form and the hover state both work. I am not sure what is causing the problem. I think the SVG might be covering the other elements so that they can not be selected but if that is the case I do not know how to fix it. Any help would be greatly appreciated.
html css forms svg
edited Nov 19 '18 at 18:27
James Ives
1,76811433
asked Nov 19 '18 at 18:23
M. CarrM. Carr
1015
I have a link here to https://codepen.io/PhysicsKid/pen/gQXPPZ.
svg {
position: fixed;
bottom: 0;
right: 0;
}
This is they styling that I have on the SVG. I have a hover state for the submit button also.
button:hover {
color: white;
background-color: dodgerblue;
border: 3px solid white;
}
When I comment out the SVG the form and the hover state both work. I am not sure what is causing the problem. I think the SVG might be covering the other elements so that they can not be selected but if that is the case I do not know how to fix it. Any help would be greatly appreciated.
html css forms svg
html css forms svg
edited Nov 19 '18 at 18:27
James Ives
1,76811433
asked Nov 19 '18 at 18:23
M. CarrM. Carr
1015
edited Nov 19 '18 at 18:27
James Ives
1,76811433
asked Nov 19 '18 at 18:23
M. CarrM. Carr
1015
edited Nov 19 '18 at 18:27
James Ives
1,76811433
edited Nov 19 '18 at 18:27
James Ives
1,76811433
edited Nov 19 '18 at 18:27
James Ives
1,76811433
1,76811433
asked Nov 19 '18 at 18:23
M. CarrM. Carr
1015
asked Nov 19 '18 at 18:23
M. CarrM. Carr
1015
asked Nov 19 '18 at 18:23
M. CarrM. Carr
1015
1015
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Add pointer-events: none; to the css definition for the SVG. This will keep it from blocking the mouse events from the elements placed below it (which is the root of your issue). See the fixed example here
answered Nov 19 '18 at 18:36
TedTed
11.2k12045
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%2f53380580%2fwhen-i-add-a-svg-with-fixed-positioning-my-form-and-hover-states-on-my-button-st%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Add pointer-events: none; to the css definition for the SVG. This will keep it from blocking the mouse events from the elements placed below it (which is the root of your issue). See the fixed example here
answered Nov 19 '18 at 18:36
TedTed
11.2k12045
add a comment |
Add pointer-events: none; to the css definition for the SVG. This will keep it from blocking the mouse events from the elements placed below it (which is the root of your issue). See the fixed example here
answered Nov 19 '18 at 18:36
TedTed
11.2k12045
add a comment |
Add pointer-events: none; to the css definition for the SVG. This will keep it from blocking the mouse events from the elements placed below it (which is the root of your issue). See the fixed example here
answered Nov 19 '18 at 18:36
TedTed
11.2k12045
Add pointer-events: none; to the css definition for the SVG. This will keep it from blocking the mouse events from the elements placed below it (which is the root of your issue). See the fixed example here
answered Nov 19 '18 at 18:36
TedTed
11.2k12045
edited Nov 19 '18 at 18:48
answered Nov 19 '18 at 18:36
TedTed
11.2k12045
answered Nov 19 '18 at 18:36
TedTed
11.2k12045
answered Nov 19 '18 at 18:36
TedTed
11.2k12045
11.2k12045
add a comment |
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%2f53380580%2fwhen-i-add-a-svg-with-fixed-positioning-my-form-and-hover-states-on-my-button-st%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
