Question

I'm trying to set up a menu, where a hover over a photo would show the person name and some links underneath the image-menu. I used mouseenter and fadein for the hover effect, coupled with a css class that has background color set to white (so that a new item would cover the old one). When I try to hover back to a certain menu item that has already been shown, nothing happens. Also, the hover does not work on certain items. When I hover from left, hover does not function on three items. When I hover from the right side, only the first two items work. Could you please suggest what could the issues be, and how these could be resolved? Please note that I need to have the menu that shows when mouseover shown, so that the user can click the links that will be provided there.

script:

 $(document).ready(function() {
    $("#pau").mouseenter(function(){
        $("#paup").fadeIn(600);
    });
    $("#red").mouseenter(function(){
        $("#redp").fadeIn(600);
    });
    $("#aesthet").mouseenter(function(){
        $("#aesthetp").fadeIn(600);
    });
    $("#danny").mouseenter(function(){
        $("#dannyp").fadeIn(600);
    });
    $("#kisic").mouseenter(function(){
        $("#kisicp").fadeIn(600);
    });
    $("#fake").mouseenter(function(){
        $("#fakep").fadeIn(600);
    });
    $("#kaa").mouseenter(function(){
        $("#kaap").fadeIn(600);
    });
    $("#heels").mouseenter(function(){
        $("#heelsp").fadeIn(600);
    });
    $("#hodanajan").mouseenter(function(){
        $("#hodanajanp").fadeIn(600);
    });
    $("#jakub").mouseenter(function(){
        $("#jakubp").fadeIn(600);
    });
});

HTML:

<div class='people'>
<div class='containertriangles'>
    <div class='wrap' id='aesthet'>
        <div class='crop'>
            <img src='./img/triangles/aesthet.jpg'>
        </div>
    </div>
    <div class='wrap' id='fake'>
        <div class='crop'>
            <img src='./img/triangles/afakeartist.jpg'>
        </div>
    </div>
    <div class='wrap' id='danny'>
        <div class='crop'>
            <img src='./img/triangles/dannyrose.jpg'>
        </div>
    </div>
    <div class='wrap' id='heels'>
        <div class='crop'>
            <img src='./img/triangles/heelsinprague.jpg'>
        </div>
    </div>
    <div class='wrap' id='hodanajan'>
        <div class='crop'>
            <img src='./img/triangles/hodanajan.jpg'>
        </div>
    </div>
    <div class='wrap' id='jakub'>
        <div class='crop'>
            <img src='./img/triangles/jakubmarik.jpg'>
        </div>
    </div>
    <div class='wrap' id='kaa'>
        <div class='crop'>
            <img src='./img/triangles/kaaglo.jpg'>
        </div>
    </div>
    <div class='wrap' id='pau'>
        <div class='crop'>
            <img src='./img/triangles/paulinemma.jpg'>
        </div>
    </div>
    <div class='wrap' id='red'>
        <div class='crop'>
            <img src='./img/triangles/redpoppy.jpg'>
        </div>
    </div>
    <div class='wrap' id='kisic'>
        <div class='crop'>
            <img src='./img/triangles/sandrakisic.jpg'>
        </div>
    </div>
</div>

CSS:

#aesthetp, #dannyp, #fakep, #heelsp, #hodanajanp, #jakubp, #kaap, #kisicp, #paup, #redp{
display:none;
position:absolute;
left:0;
right:0;
margin-top:-70px;
background-color:white;}

Im using this triangular layout I got from here: http://codepen.io/mikehobizal/pen/EHDsu

Your help is very appreciated.

Answer 1

I would start by restructuring your html to utilize reusable classes instead of id's and nesting the content inside of each link so its easy to reference.

<div class='wrap link'>
    <div class='crop'>
        <img src='./img/triangles/jakubmarik.jpg'>
    </div>
    <div class="content">
      text and other stuff here
    </div>
</div>

Then you can simplify the javascript:

$(".link").mouseenter(function(){
    $(.content').hide(); 
    $(this).find('.content').fadeIn(600);
});

This will hide all content divs and show the one nested in the div you are currently over.

You should still be able to absolute position the content divs as long as the entire nav is wrapped and has position:relative.

Answer 2

jQuery fadeIn函数只适用于隐藏元素！所以你需要在它消失后再次隐藏。

此示例显示如何重新隐藏元素，然后再将其淡入淡出：

$("#pau").mouseenter(function(){
    $("#paup").hide().fadeIn(600);
});

How to use force Jquery mouseenter fadein over again?

2 个答案: