Question

I have a small problem regarding my HTML and CSS. My HTML mark up is something like this

<div class="link-wrap">
    <h4><a href=""><span class="link-text">Link 1</span><span class="link-image">Link 2</span></a></h4>
</div>

and my CSS is something like this

<style>
.link-wrap {
  padding: 0;
  margin: 0;
}
h4 {
  display: block;
}
a {
  text-decoration: none;
}
span.link-text {
  padding: 0;
  margin: 0;
  color: #666;
  text-decoration: none;
}
span.link-text:hover {
  color: #ccc;
}
span.link-image {
  color: #F00;
}
span.link-image:hover {
  color: #666;
}
div.link-wrap span.link-text span.link-image:hover {
  text-decoration: underline;
}
</style>

Now as per my markup you can see the both <span> have converted into two different links and they have different hover state. Now I need that the two link will be converted into one. Just like example when I will hover the first span it should also change the second span hover state.

Update
Sorry to say you I can’t change my markup. My markup will be remain unchanged.

Answer 1

By studying your html markup and css I want to tell you that the css for hover does not work on span element, it works on a.
If you want to use an hover state for both the span just use

 div.link-wrap a:hover span.class-name { }

Hope it will work for you.