Hover CSS affect another element

Navigation
2

I have the following code snippet 

<td class="aluno" style="text-transform:uppercase">
  Fulano
  <a class="obs-aluno" href="#modal-obs" style="display:none">
   Link
  </a>
</td>

I want when I mouse over the TD the link that is as display none shows. How do I do this?

    
asked by anonymous 14.06.2017 / 17:12

4 answers

1

With CSS:
First, take the style from the <a> tag and put it in the css class.
link 

.obs-aluno{
  display:none
}
.aluno:hover > a{
  display:block
}
    
14.06.2017 / 17:32
4

With CSS it is possible, but you will need to remove the inline styling of the element, this is because the style defined in the style attribute has higher priority than styles defined in CSS, (without using !important ). 

a.obs-aluno {
  display: none;
}

td.aluno:hover > a.obs-aluno {
  display: inline;
}
<table>
  <tr>
    <td class="aluno" style="text-transform:uppercase">
      Fulano
      <a class="obs-aluno" href="#modal-obs">Link</a>
    </td>
  </tr>
</table>

Using !important is possible, but its use should be avoided as it may cause debugging problems in the future. 

td.aluno:hover > a.obs-aluno {
  display: inline !important;
}
<table>
  <tr>
    <td class="aluno" style="text-transform:uppercase">
      Fulano
      <a class="obs-aluno" href="#modal-obs" style="display: none">Link</a>
    </td>
  </tr>
</table>

It's important to note the priority order of the styles:

  • Inline styles, set to style ;
  • Styles in CSS defined with id;
  • CSS styles defined with class;
  • CSS styles defined for the element;

    • See the examples below:

  • With all styles applied to the same elements, the style inline will be prioritized. 

    • a {
  color: blue;
}

.yellow {
  color: yellow;
}

#green {
  color: green;
}
    <a href="#" style="color: red" class="yellow" id="green">Link</a>
  • With the id, class, and element styles applied, id will be prioritized. 

    • a {
  color: blue;
}

.yellow {
  color: yellow;
}

#green {
  color: green;
}
    <a href="#" class="yellow" id="green">Link</a>
  • With the class and element styles applied, the class will be prioritized. 

    • a {
  color: blue;
}

.yellow {
  color: yellow;
}

#green {
  color: green;
}
    <a href="#" class="yellow">Link</a>
  • Element style is only applied when no other element is present. 

    • a {
  color: blue;
}

.yellow {
  color: yellow;
}

#green {
  color: green;
}
    <a href="#">Link</a>

    Further reading

    Which css selector has priority

        
    14.06.2017 / 17:35
    1

    With the script below, when the mouse is clicked the link will be shown and when you remove the mouse, the link will be hidden: 

    $(document).ready(function(){
    $("#nome").mouseover(function(){
        $(".obs-aluno").css("display", "block");
    });
    $("#nome").mouseout(function(){
        $(".obs-aluno").css("display", "none");
    });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tdclass="aluno" style="text-transform:uppercase">
  <p id="nome">Fulano</p>
  <a class="obs-aluno" href="#modal-obs" style="display:none">
   Link
  </a>
</td>
        
    14.06.2017 / 17:17
    1

    Example with CSS only. 

    a{
  display:none;
}

div:hover a{
  display: block;
}
    <div>
  Fulano
  <a href="#">LINK</a>
</div>
        
    14.06.2017 / 17:31
    Convert Date dd / mm / yyyy to ISO 8601 Format (yyyy-mm-dd) How important is the interface in this particular code?