How to call class by class, just picking the one the mouse is on top of, without picking up the others simultaneously?

Asked

Viewed 77 times

1

I want to pass the mouse over each class and call your form without calling the form of all others. Can anyone help me? In my case I will have several name class lis-fil and every time I hover over the class is called the form of the same. however I want to call only from the class I am with the mouse.

     <div class="lis-fil">
         <a href="jumanji-bem-vindo-a-selva.php"><img src="_img/capas/jumanji.jpg" class="fil-lis"></a>
         <form action=""><?php  ?></form>
      </div>

      <div class="lis-fil">
        <a href="no-olho-do-furacao.php"><img src="_img/capas/no-olho-do-furacao.jpg" class="fil-lis"></a>
        <form action=""><?php  ?></form>
      </div>
php css3

  • Do you use pure javascript or some library to help your page’s DOM interaction ? Such as Jquery.

2 answers

1


Dude I don’t know if I understood what you wanted right, but as you put the CSS tag, I’ll give you a solution with nth-child(n) (n is the number of the order in which the div appears, as you have two div I used 1 and 2 in the example) you can make a style part for each div with class lis-fil

Both Form begin occult with display:none, but when passing the mouse over the respective div the Form appears.

Note that in the classes div.lis-fil form and div.lis-fil:hover form i make styles that are common to all div.lis-fil. Then using div.lis-fil:nth-child(1):hover form I put the particular style of each of the div, in case only change the text color for each div in this example. 

div.lis-fil form{
    display: none;
}
div.lis-fil:hover form{
    font-size: 1.5rem;
    font-family: sans-serif;
    font-weight: bold;
    display: block;
}
div.lis-fil:nth-child(1):hover form{
    color:red;
}
div.lis-fil:nth-child(2):hover form{
    color:blue;
}
<div class="lis-fil">
    <a href="jumanji-bem-vindo-a-selva.php"><img src="http://placecage.com/50/50" class="fil-lis"></a>
    <form action="">form1 lis-fil </form>
</div>

<div class="lis-fil">
    <a href="no-olho-do-furacao.php"><img src="http://placecage.com/51/50" class="fil-lis"></a>
    <form action="">form2 lis-fil </form>
</div>

<div class="lis-fil">
    <a href="no-olho-do-furacao.php"><img src="http://placecage.com/52/50" class="fil-lis"></a>
    <form action="">form3 sem classe nth-child(n) </form>
</div>

  • If the data is dynamic, your solution is cast, unless the user also loops to the CSS.

  • Actually not necessarily, because showing the form is common to all Ivds, so he doesn’t need Nth-Child to make the form appear, he only needs Nth-Child if he wants to customize each of the Rms of each div. If that’s the case with him then it would be interesting to do this dynamic

  • @Eliseub. I even edited and put the form3 that has no Nth-Child(n) formatting, but only appears in :Hover of his father div.

  • 1

    The without Child meets, simplifies to the question owner then by removing the condition with Childs use =)

  • 1

    Your complement without Child took my vote, thanks fellow.

  • 1

    @Eliseub. thanks my dear, the Nth-Child option is only if he wants a CSS for each form, but not to show and hide each form, because this is a common condition for everyone. [] s

  • Dude you are awesome, and now it seemed so simple seeing the way you spoke, in my case I think I’ll already leave the call made the form in php, with this will just be hidden, and then I call using the :Hover calling the class daughter of div.lis-fil, and it got much simpler even, thanks @hugocsl for helping me, now it’s sure that I’ll be able to do what I so much hit head here

  • @Fabríciopatrocinio good that helped, the simple is sometimes the most difficult to think. The problem leaves us blind, but an outside look sometimes helps. Good luck with the project.

  • 1

    Thanks friend, knowledge thus obtained with the help of someone who cares to help others and something coming from God. Thanks to people like you I will be able to build my film site in a very dynamic and differential way of all these sites that I myself access

  • 1

    Fabricio, votes and evaluates the answer as the correct one for you, so helps the next who may also have the same difficulty and contributes to all, hugs.

  • @Fabríciopatrocinio teaching is a pleasure that is only learned by doing, it enriches the human being. You are on the right path. Focus on the basics, avoid ready-made solutions and you will grow much more! Success!

Show 6 more comments

0

You will need to use jquery or pure javascript here follows an example 

<script>
    $(".lis-fil").mouseover(function(){
       var divAutal = $(this);
       var formAtual = divAtual.find("form");
       formAtual.submit();
    });
</scrit>

ready now you can do whatever you want with the div or form you can download the jquery here

  • Before cool to know if the user makes use of Jquery, do not impose use to it, if answer, give the solution in pure javascript too, or question first.

  • I’m trying to call using AJAX but it’s not working, what I should do to make this code happen, I have a formulary in php and I’m trying to call it daring mouseover and this code you gave me, but it’s not working $(". lis-fil"). mouseover(Function() { var divAutal = $(this); var formAtual = divAtual.find("form"); formAtual.Submit(); var regiao = $(this). attr("class"); $. ajax({ type: "GET", url: "inf-float.php", data: "regiao", Success: Function(data){ $(". inf-float"). html(data); } }); });

  • I’m sorry I didn’t ask the question right, but the form won’t exist there inside the div, I’ll add it using ajax

  • It has the answer of @hugocsl that is cool, helps even in the performance of the site, and make use of the feature "edit" question, to increase the explanation of your problem, and these questions of what features you will dispose in your code, so make it easy for everyone, hug.

  • Thank you @Eliseu B. you helped me to understand a little more what the colleague said above, now I will be able to do what I expected.

Browser other questions tagged php css3

You are not signed in. Login or sign up in order to post.