Hover in two elements at the same time

Asked

Viewed 3,178 times

1

I own a div and inside it a <a> I can see it in the div, but the anchor color doesn’t change.

HTML structure:

<div class="TamanhoECorTabs ThemeGrid_Width6">
  <a id="ancora" tabindex="14" href="#">Home</a>
</div>

CSS structure:

.TamanhoECorTabs:hover, .TamanhoECorTabs a:hover{
  background-color: #428bca !important;
  color: #fff !important;
  border:none !important;
  border-bottom: 1px solid #428bca !important;
}

I need that when I move the mouse through the div, change the color of the anchor, without having to hover the mouse over the anchor for the Hover to work.

Another thing that is happening is that even though Home is active the Hover appears. How do I take it out?

html css html5 css3

3 answers

3


Basic example:

CSS

a {
    text-decoration: none;
    width:100%;
    float:left;
}
.TamanhoECorTabs:hover, .TamanhoECorTabs a:hover{
    background-color: #428bca !important;
    color: #fff !important;
    border:none !important;
    border-bottom: 1px solid #428bca !important;
    cursor:hand;
}

Example: Demo

  • Thanks! It worked perfectly. I wonder if you know how to take the Hover effect when the div is selected, as I was with the . active

  • @Thiagoalex edited the answer, see if it works

  • @Douglasbernardino It didn’t work, the div is selected but every time I hover over it activates the Hover.

  • @Thiagoalex talks like this: when you click on the home page he loads the home page.html, then you click on Noticia he loads the news page.html and then who is selected can not have the effect Hover, something else is used programming, some language?

  • @Thiagoalex and there I can help you more? if you saw my last question?

  • @That’s exactly what Harrypotter did. The Div selected is Home and the page loaded is home.html, this in turn cannot receive the Hover from the other div that is not loaded or selected. And I’m touching the OutSystems so far I can’t use javascript or any other language. I only have access to css.

  • Has programming language?

  • Because that’s how we do it: when a page is loaded I can take which address was executed and change at runtime the CSS of the selected object, you can even take the link of this item leaving a color div only. But if you can’t use either Javascript or another language I don’t know any other way, I apologize.

  • I was suspicious of this already, I would use Javascript to do this if it was in an IDE other than the one I’m using. But thank you so much @Harrypotter

Show 4 more comments

1

1

To leave selected and without the Hover event:

CSS:

.TamanhoECorTabs:focus, .TamanhoECorTabs a:focus{
    background-color: #428bca !important;
    color: #fff !important;
    border:none !important;
    border-bottom: 1px solid #428bca !important;
    cursor:default;
}

Example: http://fiddle.jshell.net/3U5Kn/6/

If you did not want it to return more values in the click effect, then you will have to do a check in your code, because when you reload the page, you may be on the "Home" page but you will not be with "home" selected in the menu. Send your code so we solve this problem!

Browser other questions tagged html css html5 css3

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