Mixing
How to target specific children of .not($(this)) on hover
I'm working with a list of repeated figures with images inside of them and am applying hover effects. Of these figures, every one except the one being hovered over should change on mouseover. Since there's a figcaption within each figure, the initial hover should target the entire figure, not just the image within it (because I'd like to change the styling of the text on hover as well).
For example, when I hover over a figure, it should stay full color while the other's text and imgs go down in opacity and/or change to greyscale.
I've been successful adding a class to the figure itself, but not the elements within it. Here's the code I've been using:
<figure class="thumb">
<img src="http://placekitten.com/50/50">
<figcaption>caption</figcaption>
</figure>
<figure class="thumb">
<img src="http://placekitten.com/50/50">
<figcaption>caption</figcaption>
</figure>
<figure class="thumb">
<img src="http://placekitten.com/50/50">
<figcaption>caption</figcaption>
</figure>
var $thisthis = '.thumb p';
$('.thumb').on('mouseover', function(event) {
$('.thumb').not($(this)).addClass('hover');
});
$('.thumb').on('mouseout', function() {
$('.thumb').not($(this)).removeClass('hover');
});
When I change the JQuery to this in order to target specific elements that are not in $(this), it breaks.
$('.thumb').on('mouseover', function(event) {
$('.thumb figcaption').not($(this)).addClass('hover');
});
$('.thumb').on('mouseout', function() {
$('.thumb figcaption').not($(this)).removeClass('hover');
});
http://jsfiddle.net/samseurynck/ka2Xs/57/
I'm sure it's something wrong with how I'm targeting the elements, but I can't seem to figure out the right way to approach it.
Thanks all!
jquery jquery-selectors repeater
edited Jan 5 at 17:06
BoltClock♦
528k13011701207
asked Jan 2 at 20:53
samseuryncksamseurynck
247
add a comment |
I'm working with a list of repeated figures with images inside of them and am applying hover effects. Of these figures, every one except the one being hovered over should change on mouseover. Since there's a figcaption within each figure, the initial hover should target the entire figure, not just the image within it (because I'd like to change the styling of the text on hover as well).
For example, when I hover over a figure, it should stay full color while the other's text and imgs go down in opacity and/or change to greyscale.
I've been successful adding a class to the figure itself, but not the elements within it. Here's the code I've been using:
<figure class="thumb">
<img src="http://placekitten.com/50/50">
<figcaption>caption</figcaption>
</figure>
<figure class="thumb">
<img src="http://placekitten.com/50/50">
<figcaption>caption</figcaption>
</figure>
<figure class="thumb">
<img src="http://placekitten.com/50/50">
<figcaption>caption</figcaption>
</figure>
var $thisthis = '.thumb p';
$('.thumb').on('mouseover', function(event) {
$('.thumb').not($(this)).addClass('hover');
});
$('.thumb').on('mouseout', function() {
$('.thumb').not($(this)).removeClass('hover');
});
When I change the JQuery to this in order to target specific elements that are not in $(this), it breaks.
$('.thumb').on('mouseover', function(event) {
$('.thumb figcaption').not($(this)).addClass('hover');
});
$('.thumb').on('mouseout', function() {
$('.thumb figcaption').not($(this)).removeClass('hover');
});
http://jsfiddle.net/samseurynck/ka2Xs/57/
I'm sure it's something wrong with how I'm targeting the elements, but I can't seem to figure out the right way to approach it.
Thanks all!
jquery jquery-selectors repeater
edited Jan 5 at 17:06
BoltClock♦
528k13011701207
asked Jan 2 at 20:53
samseuryncksamseurynck
247
See if$('.thumb').not($(this)).find('figcaption')(before the add and remove class commands) works for you.
– BoltClock♦
Jan 5 at 17:09
Seems like it isn't working! Just tested it today.
– samseurynck
Feb 4 at 21:35
add a comment |
I'm working with a list of repeated figures with images inside of them and am applying hover effects. Of these figures, every one except the one being hovered over should change on mouseover. Since there's a figcaption within each figure, the initial hover should target the entire figure, not just the image within it (because I'd like to change the styling of the text on hover as well).
For example, when I hover over a figure, it should stay full color while the other's text and imgs go down in opacity and/or change to greyscale.
I've been successful adding a class to the figure itself, but not the elements within it. Here's the code I've been using:
<figure class="thumb">
<img src="http://placekitten.com/50/50">
<figcaption>caption</figcaption>
</figure>
<figure class="thumb">
<img src="http://placekitten.com/50/50">
<figcaption>caption</figcaption>
</figure>
<figure class="thumb">
<img src="http://placekitten.com/50/50">
<figcaption>caption</figcaption>
</figure>
var $thisthis = '.thumb p';
$('.thumb').on('mouseover', function(event) {
$('.thumb').not($(this)).addClass('hover');
});
$('.thumb').on('mouseout', function() {
$('.thumb').not($(this)).removeClass('hover');
});
When I change the JQuery to this in order to target specific elements that are not in $(this), it breaks.
$('.thumb').on('mouseover', function(event) {
$('.thumb figcaption').not($(this)).addClass('hover');
});
$('.thumb').on('mouseout', function() {
$('.thumb figcaption').not($(this)).removeClass('hover');
});
http://jsfiddle.net/samseurynck/ka2Xs/57/
I'm sure it's something wrong with how I'm targeting the elements, but I can't seem to figure out the right way to approach it.
Thanks all!
jquery jquery-selectors repeater
edited Jan 5 at 17:06
BoltClock♦
528k13011701207
asked Jan 2 at 20:53
samseuryncksamseurynck
247
I'm working with a list of repeated figures with images inside of them and am applying hover effects. Of these figures, every one except the one being hovered over should change on mouseover. Since there's a figcaption within each figure, the initial hover should target the entire figure, not just the image within it (because I'd like to change the styling of the text on hover as well).
For example, when I hover over a figure, it should stay full color while the other's text and imgs go down in opacity and/or change to greyscale.
I've been successful adding a class to the figure itself, but not the elements within it. Here's the code I've been using:
<figure class="thumb">
<img src="http://placekitten.com/50/50">
<figcaption>caption</figcaption>
</figure>
<figure class="thumb">
<img src="http://placekitten.com/50/50">
<figcaption>caption</figcaption>
</figure>
<figure class="thumb">
<img src="http://placekitten.com/50/50">
<figcaption>caption</figcaption>
</figure>
var $thisthis = '.thumb p';
$('.thumb').on('mouseover', function(event) {
$('.thumb').not($(this)).addClass('hover');
});
$('.thumb').on('mouseout', function() {
$('.thumb').not($(this)).removeClass('hover');
});
When I change the JQuery to this in order to target specific elements that are not in $(this), it breaks.
$('.thumb').on('mouseover', function(event) {
$('.thumb figcaption').not($(this)).addClass('hover');
});
$('.thumb').on('mouseout', function() {
$('.thumb figcaption').not($(this)).removeClass('hover');
});
http://jsfiddle.net/samseurynck/ka2Xs/57/
I'm sure it's something wrong with how I'm targeting the elements, but I can't seem to figure out the right way to approach it.
Thanks all!
jquery jquery-selectors repeater
jquery jquery-selectors repeater
edited Jan 5 at 17:06
BoltClock♦
528k13011701207
asked Jan 2 at 20:53
samseuryncksamseurynck
247
edited Jan 5 at 17:06
BoltClock♦
528k13011701207
asked Jan 2 at 20:53
samseuryncksamseurynck
247
edited Jan 5 at 17:06
BoltClock♦
528k13011701207
edited Jan 5 at 17:06
BoltClock♦
528k13011701207
edited Jan 5 at 17:06
BoltClock♦
528k13011701207
528k13011701207
asked Jan 2 at 20:53
samseuryncksamseurynck
247
asked Jan 2 at 20:53
samseuryncksamseurynck
247
asked Jan 2 at 20:53
samseuryncksamseurynck
247
247
See if$('.thumb').not($(this)).find('figcaption')(before the add and remove class commands) works for you.
– BoltClock♦
Jan 5 at 17:09
Seems like it isn't working! Just tested it today.
– samseurynck
Feb 4 at 21:35
add a comment |
See if$('.thumb').not($(this)).find('figcaption')(before the add and remove class commands) works for you.
– BoltClock♦
Jan 5 at 17:09
Seems like it isn't working! Just tested it today.
– samseurynck
Feb 4 at 21:35
See if
$('.thumb').not($(this)).find('figcaption') (before the add and remove class commands) works for you.– BoltClock♦
Jan 5 at 17:09
See if
$('.thumb').not($(this)).find('figcaption') (before the add and remove class commands) works for you.– BoltClock♦
Jan 5 at 17:09
Seems like it isn't working! Just tested it today.
– samseurynck
Feb 4 at 21:35
Seems like it isn't working! Just tested it today.
– samseurynck
Feb 4 at 21:35
add a comment |
0
active
oldest
votes
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%2f54013042%2fhow-to-target-specific-children-of-notthis-on-hover%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f54013042%2fhow-to-target-specific-children-of-notthis-on-hover%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
See if
$('.thumb').not($(this)).find('figcaption')(before the add and remove class commands) works for you.– BoltClock♦
Jan 5 at 17:09
Seems like it isn't working! Just tested it today.
– samseurynck
Feb 4 at 21:35