Hover CSS affect another element

Question

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 that when you mouse the TD the link that this as display None is shown. How do I do this?

Answer 1

With CSS it is possible yes, but you will need to remove the styling inline element, this is because the style defined in the attribute style has higher priority than styles defined in the CSS, being impossible to overwrite them (without using the !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 the !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 is important to highlight the order of priority of styles:

1. Styles inline, defined in style;
2. Styles in CSS defined with id;
3. Styles in CSS defined with class;
4. Styles in CSS defined for the element;

See the examples below:

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

a {
  color: blue;
}

.yellow {
  color: yellow;
}

#green {
  color: green;
}

<a href="#" style="color: red" class="yellow" id="green">Link</a>

2. With 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>

3. With 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>

4. The style of the element is only applied when no other is present.

a {
  color: blue;
}

.yellow {
  color: yellow;
}

#green {
  color: green;
}

<a href="#">Link</a>

Additional reading

Which css selector has priority

Answer 2

With the script below while passing the mouse the link will be shown and when removing 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>

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

Answer 3

Example with CSS only.

a{
  display:none;
}

div:hover a{
  display: block;
}

<div>
  Fulano
  <a href="#">LINK</a>
</div>

Answer 4

With CSS:
First, take the style off the tag <a> and place in the css class.
https://jsfiddle.net/1buoeckz/

.obs-aluno{
  display:none
}
.aluno:hover > a{
  display:block
}