Grow your CSS skills. Land your dream job.

attribute selector as variable not working

  • # December 15, 2009 at 6:07 pm

    hello forum,

    Here’s my situation shipkifarm.com/recipes: I want to do a remote link from the post thumbnail to the post title. When I hover over the post thumb, I want the post title to be underlined (as if I had hovered over the post title). the problem is that the image is not in the same div as the title, but they do share an identical href attribute.

    So, what I have so far:

    Code:
    var myHref = jQuery(“.recipeThumb a”).attr(“href”);

    var myLink = jQuery(“.recipeTitle a[href*='+ myHref +']“);

    console.log(myLink)

    Then I’d take the matched element and set the text-decoration to underline. Seems simple. What isn’t working though, is when I pass a variable into the "href" selector in the myLink var I don’t get a matched element. I know that the myHref var matches the url, and I know that when I pass a string into the href selector, I get a match. What isn’t working is the variable as the selector…

    Any ideas?

    Thanks,
    Doobie

    # December 15, 2009 at 6:16 pm

    I not sure i read the post properly but cant you just run a function that happens when you hover over the image, then in the function select the class of the title and add underline?

    # December 18, 2009 at 11:30 am

    Here’s what I ended up doing. Seems to work well enough.

    Thanks for the reply, Al.

    Cheers,
    J

    Code:
    jQuery(“.recipeThumb a”).hover(function() {
    var myHref = jQuery(this).attr(“href”);
    var myLink = jQuery(“.recipeTitle a[href*="+ myHref +"]“);
    jQuery(myLink).addClass(“underline”);
    },
    function(){
    var myHref = jQuery(this).attr(“href”);
    var myLink = jQuery(“.recipeTitle a[href*="+ myHref +"]“);
    jQuery(myLink).removeClass(“underline”);
    });
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".