CODEWITHSUNDEEP
htmlcss
JK2
JK2

Reputation: 31

border on hover element of list

I have a problem with list in html.

I want a basic functionality: when user hover on an element of the list, its border-top-color and his sibling changes to red;

So if I have HTML like this:

<dl>
  <dt>Example 1</dt>
  <dd>Description 1</dd>

  <dt>Example 2</dt>
  <dd>Description 2</dd>

  <dt>Example 3</dt>
  <dd>Description 3</dd>
</dl>

and CSS:

dd {
    display: none;
}

dt {
    border-top: 1px solid black;
}

dt:last-of-type {
    border-bottom: 1px solid black;
}

dt:hover {
    border-top: 1px solid red;
}

dt:hover:last-of-type {
    border-bottom: 1px solid red;
}

dt:hover + dd + dt {
    border-top: 1px solid red;
}

I don't get the expected result. If I hover on the first element, only top-border changes to red. If I hover on the third element, then on the second and then on the first, the border changes to red for second element and first, but should only to first on the last state. Why does it happen?

Upvotes: 3

Views: 320

Answers (2)

JK2
JK2

Reputation: 31

Ok, so I fixed it by adding single line:

dt:hover ~ dt {}

Now it works in Chrome, too.

Upvotes: 0

kkoala
kkoala

Reputation: 242

This seems to be a case of a Webkit bug with multiple adjacent siblings that's been around for years. See one of many reports. I tested in Firefox 21 and IE10 without issues.

Here's a modified version of Zenith's fiddle that demonstrates correct behaviour for one adjacent sibling selector in Chrome/Webkit. I omitted the dd's and adjusted the CSS selector to dt:hover + dt (just to demonstrate; this doesn't make sense, of course).

There have been CSS hacks to work around the issue, but they cause problems on certain platforms. Your best option is probably to achieve the desired effect using a different approach.

(Sorry, this probably belongs in the comments to your question, but I still lack the required reputation)

Upvotes: 1

Related Questions