CODEWITHSUNDEEP
jqueryhtmlcss
ristenk1
ristenk1

Reputation: 433

Part of Jquery "hide/show" working, other part isn't

I am able to get only part of my jquery working. It's driving me crazy because the desgn_bx_hidden and des_txt are both hiding and showing but the inside content of desgn_bx_hidden isn't showing and I want to be able to style it with CSS. Actually it is showing in the browser but I can't get the css to effect it and in firebug it shows that the desgn_bx toggles to show but the inside content doesn't. I've tried changing the content inside with the changes. It has two links inside and originally had 2 more divs wrapping around it to format the font but I took that out trying to simplify.... anyone run into this before?

$(".desgn_bx").mouseover(function () {
    $(".desgn_bx_hidden").show();
    $(".des_txt").hide();

});
$(".desgn_bx").mouseout(function () {
    $(".desgn_bx_hidden").hide();
    $(".des_txt").show();
});


<div class="desgn_bx">
    <a href="/design"></a>
    <div class="desgn_bx_hidden block-quicktabs" style="display: none;">
        <a id="quicktabs-tab-2-0" class="qt_tab active" 
        href="/design?quicktabs_2=0#quicktabs- 2">Residential</a>
        <a id="quicktabs-tab-2-1" class="qt_tab active" 
        href="/design?quicktabs_2=1#quicktabs-2">Commercial</a>
    </div>
    <p class="des_txt" style="display: block;">
    <span>Interior Design </span>
    </p>
</div>

Here is the link: http://freespiriteurodesign.com.b1.bloomsite.net/

Thank you!!

Upvotes: 0

Views: 254

Answers (2)

ristenk1
ristenk1

Reputation: 433

Got it!

$(".desgn_bx").mouseover(function () {
                        $(".desgn_bx_hidden").show();
                        $(".desgn_bx_hidden").children().show();
                        $(".des_txt").hide();

                    });
  $(".desgn_bx").mouseout(function () {
                        $(".desgn_bx_hidden").hide();
                        $(".desgn_bx_hidden").children().hide();
                        $(".des_txt").show();
                    });

It wasn't working because it didn't have the children

Upvotes: 1

adeneo
adeneo

Reputation: 318182

If your not hitting the target element with css, something else is probably wrong, but try a little basic structuring and maybe you'll figure it out.

$(document).ready(function() {
    $(".desgn_bx").on({
        mouseenter: function() {
            $(".desgn_bx_hidden").show();
            $(".des_txt").hide();
        },
        mouseleave: function() {
            $(".desgn_bx_hidden").hide();
            $(".des_txt").show();
        }
    });
});

Upvotes: 0

Related Questions