CODEWITHSUNDEEP
htmlcssgoogle-chrome
sdesciencelover
sdesciencelover

Reputation: 149

Inconsistent CSS hover effect in Chrome versus IE/Firefox

I have a page where I have a link that can be directly followed. When the user hovers over the link, though, I want to display an alternate external link indicated by a 16px by 16px icon. The following works perfectly in Firefox and IE. In Chrome, however, the alternate link disappears whenever I am no longer hovering over the normal link.

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
  span.inner {
    margin-left: 8px;
    visibility: hidden;
  }

  span.outer:hover > span.inner {
    visibility: visible;
  }
  </style>
</head>
<body>
<span class="outer">
    <a href="foo/bar">Always Visible</a>
    <span class="inner">
        <a href="foo/baz">
            <img src="external.png" alt="baz" />
        </a>
    </span>
</span>
</body>
</html>

What changes would I make, or how would I write this differently, so I get the intended effect in all 3 browsers?

Followup Solution based on the answer I selected:

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
  a.inner {
    margin-left: 8px;
    visibility: hidden;
  }

  div.outer:hover > a.inner {
    visibility: visible;
  }
  </style>
</head>
<body>
  <div class="outer">
    <a href="foo/bar">Always Visible</a>
    <a class ="inner" href="foo/baz">
      <img src="external.png" alt="baz" />
    </a>
  </div>
</body>
</html>

Upvotes: 1

Views: 787

Answers (1)

Adam
Adam

Reputation: 12650

By default .outer is an inline element, since it's a span. Inline elements are not meant to contain other elements. You could have used a div to achieve the desired effect, since a div is a block-level element. You could also just set .outer to display: block.

.outer {
    display: block;
}

Upvotes: 1

Related Questions