How to call class by class, taking only the mouse is on it, without catching the others simultaneously?

Question

How to call class by class, taking only the mouse is on it, without catching the others simultaneously?

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I want to hover over each class and call your form without calling the form of all others. Can someone help me? In my case I will have several class names lis-fil and every time I move the mouse over the class it is called the form of the same ones. but I want to call only the class I have 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

asked by anonymous 23.05.2018 / 13:15

2 answers

CONCAT of querys DELETE? Centralize submit no form

score 1 · Answer 1

I do not know if I understood correctly what you wanted, but as you put the CSS tag, I'll give you a solution with nth-child(n) ( n ) is the order number in that div appears, as you have two div I used 1 and 2 in the example) you can make a separate style for each div with class lis-fil

The two Form starts hidden with display:none , but when you hover over the div the Form appears.

Note that in classes div.lis-fil form and div.lis-fil:hover form I do the 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 div , in case I 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>

score 0 · Answer 2

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>

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