Hover in two elements at the same time

Question

Hover in two elements at the same time

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (1 votes)

1

I have a div and within it a <a> can hover in the div, but the color of the anchor does not change.

HTML structure:

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

CSS Framework:

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

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

Another thing that is happening is that even the Home being active the hover appears. How do I get this out?

html html5 css css3

asked by anonymous 10.07.2014 / 14:48

3 answers

1

Just put this display block:

a{
   display:block;
}

link

10.07.2014 / 14:59

1

To leave selected and without 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: link

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 it will not have "home" selected in the menu. Send us your code so we can solve this problem!

10.07.2014 / 15:24

How to check if there is only one position in the array element? Upload menu after login with AngularJS

score 3 · Accepted Answer

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