Binding items to dock elements by id
I have a <ul> with A and B as its <li> that has a highlight on hover effect. I also was able to create a Mac OS X like dock (inspired by Henrique Erzinger's CodePen) with items A1, A2, A3, B1 and B2.
Is there a way to items in list with items in the dock, so that hovering on a list item brings the linked dock elements in focus?
For example:
Hover A -> Focus/Enlarged A1, A2, A3
Hover B -> Focus/Enlarged B1, B2
Here's my JSFiddle with the list and dock included.
Thanks in advance.
javascript html css
asked Nov 25 '18 at 22:00
Souradeep SinhaSouradeep Sinha
44118
add a comment |
I have a <ul> with A and B as its <li> that has a highlight on hover effect. I also was able to create a Mac OS X like dock (inspired by Henrique Erzinger's CodePen) with items A1, A2, A3, B1 and B2.
Is there a way to items in list with items in the dock, so that hovering on a list item brings the linked dock elements in focus?
For example:
Hover A -> Focus/Enlarged A1, A2, A3
Hover B -> Focus/Enlarged B1, B2
Here's my JSFiddle with the list and dock included.
Thanks in advance.
javascript html css
asked Nov 25 '18 at 22:00
Souradeep SinhaSouradeep Sinha
44118
add a comment |
I have a <ul> with A and B as its <li> that has a highlight on hover effect. I also was able to create a Mac OS X like dock (inspired by Henrique Erzinger's CodePen) with items A1, A2, A3, B1 and B2.
Is there a way to items in list with items in the dock, so that hovering on a list item brings the linked dock elements in focus?
For example:
Hover A -> Focus/Enlarged A1, A2, A3
Hover B -> Focus/Enlarged B1, B2
Here's my JSFiddle with the list and dock included.
Thanks in advance.
javascript html css
asked Nov 25 '18 at 22:00
Souradeep SinhaSouradeep Sinha
44118
I have a <ul> with A and B as its <li> that has a highlight on hover effect. I also was able to create a Mac OS X like dock (inspired by Henrique Erzinger's CodePen) with items A1, A2, A3, B1 and B2.
Is there a way to items in list with items in the dock, so that hovering on a list item brings the linked dock elements in focus?
For example:
Hover A -> Focus/Enlarged A1, A2, A3
Hover B -> Focus/Enlarged B1, B2
Here's my JSFiddle with the list and dock included.
Thanks in advance.
javascript html css
javascript html css
asked Nov 25 '18 at 22:00
Souradeep SinhaSouradeep Sinha
44118
asked Nov 25 '18 at 22:00
Souradeep SinhaSouradeep Sinha
44118
asked Nov 25 '18 at 22:00
Souradeep SinhaSouradeep Sinha
44118
asked Nov 25 '18 at 22:00
Souradeep SinhaSouradeep Sinha
44118
asked Nov 25 '18 at 22:00
Souradeep SinhaSouradeep Sinha
44118
44118
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Yes, it is possible with JavaScript. You will have to group your dock items with classes, for example .groupA and .groupB, and give them a sub class .focused (so .groupA.focused) which should have the same styling as your :hover style for the dock elements do now.
Your script should then trigger when you hover over A or B and respectively toggle the .focused class on your dock elements.
That's the theory at least. The coding you will have to do yourself.
answered Nov 26 '18 at 20:38
yinkenyinken
25329
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%2f53472435%2fbinding-li-items-to-dock-elements-by-id%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
Yes, it is possible with JavaScript. You will have to group your dock items with classes, for example .groupA and .groupB, and give them a sub class .focused (so .groupA.focused) which should have the same styling as your :hover style for the dock elements do now.
Your script should then trigger when you hover over A or B and respectively toggle the .focused class on your dock elements.
That's the theory at least. The coding you will have to do yourself.
answered Nov 26 '18 at 20:38
yinkenyinken
25329
add a comment |
Yes, it is possible with JavaScript. You will have to group your dock items with classes, for example .groupA and .groupB, and give them a sub class .focused (so .groupA.focused) which should have the same styling as your :hover style for the dock elements do now.
Your script should then trigger when you hover over A or B and respectively toggle the .focused class on your dock elements.
That's the theory at least. The coding you will have to do yourself.
answered Nov 26 '18 at 20:38
yinkenyinken
25329
add a comment |
Yes, it is possible with JavaScript. You will have to group your dock items with classes, for example .groupA and .groupB, and give them a sub class .focused (so .groupA.focused) which should have the same styling as your :hover style for the dock elements do now.
Your script should then trigger when you hover over A or B and respectively toggle the .focused class on your dock elements.
That's the theory at least. The coding you will have to do yourself.
answered Nov 26 '18 at 20:38
yinkenyinken
25329
Yes, it is possible with JavaScript. You will have to group your dock items with classes, for example .groupA and .groupB, and give them a sub class .focused (so .groupA.focused) which should have the same styling as your :hover style for the dock elements do now.
Your script should then trigger when you hover over A or B and respectively toggle the .focused class on your dock elements.
That's the theory at least. The coding you will have to do yourself.
answered Nov 26 '18 at 20:38
yinkenyinken
25329
answered Nov 26 '18 at 20:38
yinkenyinken
25329
answered Nov 26 '18 at 20:38
yinkenyinken
25329
answered Nov 26 '18 at 20:38
yinkenyinken
25329
25329
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%2f53472435%2fbinding-li-items-to-dock-elements-by-id%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
