onmouseover in dropleft menu

Asked

Viewed 30 times

-3

Hello, I’m new in the area of programming and my question may seem a little silly to those who have more experience, but I’m not able to make the mouseover effect work in the dropleft menu (bootstrap).

I tried to use javascript tags and even change the function of the variables, but I was not successful.

I’m going to leave here an example of what I’m trying to do.

PS: I am not using the UL tag as it is for the icon menu to appear all left, not in list, below.

<html>
  <head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>

  <body>
    <h1>Dropleft</h1>
<div>   
<table>
<tbody>
<tr>
<td>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
</td>
<td>
<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <a href="#"><img src="https://dne4i5cb88590.cloudfront.net/invisionpower-com/reactions/react_like.png" width="32" height="32" /></a>
  </button>
  <div class="dropdown-menu"><center> &nbsp;
    <a href="#"><img src="https://dne4i5cb88590.cloudfront.net/invisionpower-com/reactions/react_haha.png" width="32" height="32" /></a> &nbsp; 
    <a href="#"><img src="https://dne4i5cb88590.cloudfront.net/invisionpower-com/reactions/react_confused.png" width="32" height="32" /></a> &nbsp; 
    <a href="#"><img src="https://dne4i5cb88590.cloudfront.net/invisionpower-com/reactions/react_sad.png" width="32" height="32" /></a> &nbsp;  </center>  
  </div>
</div>
</td>
</tr>
</tbody>
</table>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>
javascript bootstrap-4 dropdown

  • If you are using Bootstrap, you have to follow its documentation, use the same tags and attributes if it won’t work https://getbootstrap.com/docs/4.0/components/navbar/ this is the documentation you should follow!

  • I read the documentation friend, it does not say anything about the onmouseover command in the dropdown reference and not in other references, because I searched the whole site before coming here for help... If it were simple, you can be sure I wouldn’t be here...

  • 1

    I made an effort to answer, but your question would need to be clearer. The colleague’s comment above may not have helped you, but the intention was to help. He did not understand the question because she is presented in a confused way.

1 answer

2

It’s with CSS that you do it, not with Javascript:

.dropleft .dropdown-menu a {
    display: inline-block; /* para a imagem afetar a altura do a */
}

.dropleft .dropdown-menu a:hover {
    background-color: red;
}

Browser other questions tagged javascript bootstrap-4 dropdown

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