Apply hover on the topmost child element on which cursor actually points, and not all the ancestral parents

Question

Scenario : I want to be able to apply border css on the exact element on which I'm hovering, but whats happening is it applies the css on ts ancestral parents as well. [refer image]. I do not know the classes, or lets say the whole html structure beforehand, it is dynamic.

I have read other similar questions on stackoverflow as well but they don't match exactly to my scenario. Some say apply css on child when hover over parent, some have classes known beforehand, etc.

But if anybody happens to know a link which points to the exact answer I need, pls do let me know.

Here you can see I'm pointing over the text 'Striped Ankle ...' but the hovering css also takes place over all the ancestral parents

The css I'm applying is

.root_div_class_name * :hover {
    border: 1px solid #e42a78;
}

EDIT I am seeing a lot of people pointing out that the universal selector I am using is the cause of the problem, that it is applying the hover property to all the tags in the web page. But could there be some misunderstanding bcoz I still don't see it as a problem. I want the hover property applied on all the tags. It's just when I hover over a tag, I want to apply border only to that tag, not its parents.Border must be applied on the parent only when I hover over the parent.

EDIT Like I already mentioned, I am not creating the html. I already get the html therefore content is dynamic. I cannot further create siblings or change the structure, as suggested by the solution on the marked duplicate link. I have to make-do

Because `* :hover { border: 1px solid #e42a78; } ` this applies to all elements in the DOM — Athul Nath, Mar 26 '18 at 07:53
Just a quick suggestion, first read about css selectors, then you will find the solution by yourself. P.S. - * is a universal selector, so it will select all the elements in a document — Ayush Sharma, Mar 26 '18 at 07:56
I used * so that the hover property is available all over the document for all the tags...because I could be hovering over any tag. But now that I'm hovering over any one tag, comes my problem. @AyushSharma — Tripti Rawat, Mar 26 '18 at 08:00
you think that you hover on one tag, but no ... read more about how Hover works and how event are captured, etc ... you think you have an issue but it's the normal behavior of CSS, so read more about it — Temani Afif, Mar 26 '18 at 08:01
@Anuresh but I want the hover property available for all the tags. The problem here is along with the tag I'm hovering over, it is also applying hover property to THAT element's parents, then grandparents, etc — Tripti Rawat, Mar 26 '18 at 08:02
yes @TemaniAfif the issue is on my end I understand it's normal behavior of css thats why it is happening. — Tripti Rawat, Mar 26 '18 at 08:05
@TriptiRawat-- It will apply hover property to element's parents because, parent is also a type of HTML tag, and you want hover to available for all the tags. Don't use *, instead make a class and add hover property to it, and for whichever elements you want hover, add that class to that element. — Ayush Sharma, Mar 26 '18 at 08:05
This may be useful : https://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element — Jeremy Thille, Mar 26 '18 at 08:09
Hovering a child automatically means hovering the parent at the same time - there is nothing you can do about that. What you want is therefor not possible - you _will_ need to be more specific in your selection of what elements you want to apply this to. If you really think you need to re-invent what browser debug tools already offer (or what else is the purpose of this?), then you will have to do this using JavaScript, so that you can add a class or set the border styles directly on the element the mouse is currently over, without propagating it further up the tree. — CBroe, Mar 26 '18 at 11:06
@CBroe Yes I understand the behavior you are pointing to, and as for now I may as well be applying JS/Jquery solution to it. But the closest I could come to a pure css solution is like this : https://stackoverflow.com/questions/17923922/hover-on-child-without-hover-effect-on-parent — Tripti Rawat, Mar 26 '18 at 11:09
But you don’t need this for your actual, final website layout, right? You only want this as some sort of debug helper tool, to easily locate elements and their dimensions? Then you should really rather go and invest your time in familiarizing yourself with the functionality of your browser dev tools, because those have that and much more already built in. If debugging is the purpose here, then you are wasting time re-inventing an already existing solution, only in a much worse way ... — CBroe, Mar 26 '18 at 11:12
@CBroe thnx for already assuming I don't need it for final website :D but the thing is I do need it. This post is not me discussing what i need it for, where I'll implement it, etc. I posted a question, either it has a solution or it doesn't — Tripti Rawat, Mar 26 '18 at 11:19
Possible duplicate of [css :hover only affect top div of nest](https://stackoverflow.com/questions/6679283/css-hover-only-affect-top-div-of-nest) — Saeed, Mar 26 '18 at 11:55

Saeed · Answer 1 · 2018-03-26T11:23:03.007

0

It is impossible with CSS. solution with JQuery:

$(".test *").mouseover(
  function(e) {
      e.stopPropagation();
      $(this).css("border", "1px solid red");
  }).mouseout(
  function() {
      $(this).css("border", "transparent");
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <p>Lorem ipsum ...</p>
  <p>Delete</p>
  <ul>
    <li>One</li>
    <li>
      <ul>
        <li>One</li>
        <li>Two</li>
      </ul>
    </li>
  </ul>
</div>

edited Mar 26 '18 at 11:23

answered Mar 26 '18 at 08:51

Saeed

2,169
2
13
29

I already have tried this.....my code edit was something like `.class_name * { /*border property*/ }` The original problem I stated in my question is still there – Tripti Rawat Mar 26 '18 at 09:46
No it does not. Do one thing add a ul tag with some elements after the last
. Something like ...
Delete
- one
- two
. Now you'll see when you hover over the
tags One and Two, it creates a border on
as well as over

Tripti Rawat

Mar 26 '18 at 11:03

what about this? – Saeed Mar 26 '18 at 11:27

Already posted the jquery solution here bcoz that one works perfectly (for now). Also your code is correct but still misses out some things in my use case. Anyway thnx :) – Tripti Rawat Mar 26 '18 at 11:33

score 0 · Answer 2 · answered Mar 26 '18 at 11:09

Initially I was looking for a pure CSS solution. The best I could find was this:
hover on child without hover effect on parent

Since I'm no CSS expert I still have to understand it and get my work around it. But till then, jquery does the work for me. Here's the code I used

$('.root_div_class_name').mouseover(function(e){
    $(e.target).css("border", "1px solid #e42a78")
})

$('.root_div_class_name').mouseout(function(e){
    $(e.target).css("border", "")
})

Apply hover on the topmost child element on which cursor actually points, and not all the ancestral parents

2 Answers2