How can I change the style of an html tag using another html tag in css?

Asked

Viewed 57 times

-2

So people I am making a menu and wanted to discard the use of javascript with this I would like to make that when I pressed the mouse on the menu icon automatically my #content element would win a margin-top: 320px, look at my code:

///* CSS *///

#content{
     margin-top: 50px
}

#menu img:hover + #content{
     margin-top: 320px;
}

///* HTML *///
<div id="menu"> 

     <img src="image.png">

</div>

<div id="content">

     <hr>

</div>
html css menu hover elements
  • 2

    Dude if you have to press the icon to open it, how will you take the mouse from the icon to click on the menu option? Once you take the mouse from the icon the menu will close and you will not be able to click on the menu items....

  • I think you’ll have to use javascript.

2 answers

0

The + selector can only be used to select an element that comes just below, and as the image is inside the div #menu, use of selector is incorrect. What you can do to modify the code for this one here

#content{
    margin-top: 50px
}
            
#menu:hover ~ #content{
    margin-top:320px;
}

  • He doesn’t want the Hover was just an example he wants to click.

  • 1

    Then it will only be able to achieve the result using jquery or javascript

-4

The selector :hover applies styles when the mouse passes over the elemetho, to apply styles when an element is pressed you need to use the selector :focus in your case would:

#content:focus {
  margin-top: 320px;
}

  • It is not true that the pseudo class :focus is applied when an element is clicked. The pseudo class :focus is applied when an element is selected, regardless of whether it is selected by mouse or keyboard. See example.

  • Thanks for the information, I didn’t know that it was enough for the element to be selected with the tab key to activate :Focus

Browser other questions tagged html css menu hover elements

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