Member Avatar for hiyatran

I would like to have multiple id and all using hover link for all

#test1, #test2, #test3, #test4 a:hover{
color:#0F0;
}

this doesn't work. NOT sure why??
thanks

  • 3 Contributors
  • 2 Replies
  • 99 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Dandello

Dani AI

Generated

The issue was not a browser bug but selector syntax: when you use a comma-separated selector list, each comma separates a complete selector. In the original rule the :hover pseudo-class was only part of the final selector, so only that last selector ever matched link hovers. See the selector-list behavior on MDN for the exact rules for grouping selectors (Selector list — MDN).

Rather than repeating the hover on many ID selectors, use a shared class on the containers (or on the links themselves) so one rule covers all instances. For example, mark the containers with a class and target the anchors inside that class:

.group a:hover {
  color: green;
}

This is cleaner, easier to maintain, and avoids duplicating nearly identical rules across multiple IDs.

If the rule still appears not to work, check these things: confirm the markup actually has anchors inside the selected element; inspect the computed styles in DevTools to see which rule wins (specificity/order); make sure there is no inline style or more specific selector overriding your hover; verify the CSS file is loaded and there are no syntax errors earlier in the stylesheet. correctly pointed out the selector grouping issue, and ’s suggestion to consolidate styles is the right direction — prefer classes for shared presentation and reserve IDs for unique, single-purpose elements. For the pseudo-class itself, details and browser behavior are documented here: :hover — MDN.

Recommended Answers

All 2 Replies

Member Avatar for Lightninghawk

this is not my specialty area, and someone will correct me if I am wrong.

But with what you are showing. I have to ask a couple of questions>>

1. If all of those ID's are going to use the same attributes; why not just use 1 id?

2. If they are not going to use EXACTLY the same attributes you have to create individual id's anyway, and it only takes a moment to add the hover attribute. So why waste time trying to merge the id's?


Forgive me if I am misunderstanding something. But it seems to me you are trying to streamline something that is already as efficient as it gets

Edited by Lightninghawk because: n/a
Member Avatar for Dandello 
#test1 a:hover, #test2 a:hover, #test3 a:hover, #test4 a:hover{
color:#0F0;
}

The attributes for #test1 - #test3 weren't being assigned to a:hover.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.