How to underline on hover text within element that excludes a child element

Question

Code is as follows:

<h1 class="slide-title">
<span class="slider-category">
<a href="/test/test.html"> Blocking irritating text</a>
</span>
Hong Kong Trip Nov 2015 – Day 3 Itinerary
</h1>

Using h1.slide-title:hover will affect the "Blocking irritating text" within the span element as well.

I ONLY want to underline on hover the following text "Hong Kong Trip Nov 2015 – Day 3 Itinerary", I DO NOT want the "Blocking irritating text" to be underlined when I hover over it.

Is this possible with CSS or jQuery?

Edit: question is not duplicate as I do not want to edit the HTML. Also as a side note, I would like the <span> element to underline on hover separately as well.

Well if I could easily I wouldn't be asking here. I could use jQuery to change the HTML. Wondering if there is another way. — David Z, Jan 08 '16 at 18:55
Yes, that's the intention, but if there's another way that can achieve the intended effect I'm open to it — David Z, Jan 08 '16 at 18:59
The problem David is that you cant target text that doesnt have an element to target. Using jQuery you could wrap the text into a span element with an associated class. — Cam, Jan 08 '16 at 19:02
Then no...that's not the way `text-decoration` works..it applies to the whole block element. I'd use Jquery to parse the text after the `span` and underline it some other way...or just wrap that in the `span` and style accordingly. — Paulie_D, Jan 08 '16 at 19:02
Duplicate - http://stackoverflow.com/questions/4481318/css-text-decoration-property-cannot-be-overridden-by-child-element?lq=1 — Paulie_D, Jan 08 '16 at 19:04
Yep I'm aware, was hoping that there is another way. Have too many funky jQuery scripts on my site as it is lol. — David Z, Jan 08 '16 at 19:05
Possible duplicate of [CSS: Could not override inherited text-decoration property](http://stackoverflow.com/questions/2111100/css-could-not-override-inherited-text-decoration-property) — CoderPi, Jan 08 '16 at 19:05
@Sushil wow great answer! unfortunately I also want the element to underline when hovered on, separately — David Z, Jan 08 '16 at 19:06
@DavidZ the same? his fiddle link show nothing like that (or working) to me — CoderPi, Jan 08 '16 at 19:18
@CodeiSir fair enough - as I've said above ti Sushil as a follow-up, unfortunately I also need the element to underline when hovered on, separately — David Z, Jan 08 '16 at 19:21
@DavidZ did you see my anwer? You don't need extra stuff it's possible in CSS — CoderPi, Jan 08 '16 at 19:22
@CodeiSir I gave your ans an upvote but as stated, I need the "Blocking irritating text" to underline on hover separately as well, currently looking at jQuery solutions to wrap the text around with a tag — David Z, Jan 08 '16 at 19:49
@DavidZ a now I understand, well that's easy I'll add it to my answer — CoderPi, Jan 08 '16 at 19:53

CoderPi · Answer 1 · 2016-01-08T19:53:41.603

7

You will have to change the Element you don't want to be affected by text-decoration a little with display: inline-block:

h1.slide-title:hover {
  text-decoration: underline;
}
h1.slide-title a {
  display: inline-block;
  text-decoration: none;
}
h1.slide-title a:hover {
  text-decoration: underline;
}

<h1 class="slide-title">
  <span class="slider-category">
    <a href="/test/test.html">Blocking irritating text</a>
  </span>
  Hong Kong Trip Nov 2015 – Day 3 Itinerary
</h1>

[link] Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

So you could also use float: left or position: absolute

edited Jan 08 '16 at 19:53

answered Jan 08 '16 at 19:03

CoderPi

12,985
4
34
62

very close, but if you put it in a fiddle and play around with it you'll see the problem – David Z Jan 08 '16 at 19:56
intention was for the "blocking irritating text' to underline on hover separately, here when you hover over it, the whole text gets underline - doesn't look like I can get it done with CSS :( – David Z Jan 08 '16 at 20:03
oh yeah. you're right. thats the issue even I am facing – Sushil Jan 08 '16 at 20:03
@DavidZ its realy hard to get what you mean. but i understand. I know how to solve it, by I have no time right now – CoderPi Jan 08 '16 at 20:05
@CodeiSir sorry about that, well if you can solve it with pure CSS you're really pretty good at this – David Z Jan 08 '16 at 20:07
@DavidZ as far as i know it should not be possible in css3 but in css4. bin with JS its easy – CoderPi Jan 08 '16 at 20:08
@CodeiSir I'm actually having a ton of trouble just trying to add tags around the unwrapped text using jQuery - for one, there are multiple instances of the element with the class, so insertBefore or insertAfter won't work... another solution below conflicted with another script – David Z Jan 08 '16 at 20:14
@DavidZ loop through the nodes of the element, check if its a text node (`.nodeType` === 3) and if it's not a blank node (.trim() on its content and check if its not empty) and then wrap this in the new span – CoderPi Jan 08 '16 at 20:17

andi · Accepted Answer · 2016-01-08T19:41:51.077

1

.slide-title a {text-decoration:none;}
.slide-title a:hover {text-decoration:underline;}

$("h1.slide-title").each(function(){
    $(this).contents().each(function(){
    if (this.nodeType === 3 /*text node*/) {
      $(this).wrap("<a></a>");
    }
  });
});

see fiddle: https://jsfiddle.net/cvn43ncg/1/

edited Jan 08 '16 at 19:41

answered Jan 08 '16 at 19:18

andi

6,442
1
18
43

I used `` as a wrapper for simplicity, but you could use any element/class and then add to the CSS accordingly. – andi Jan 08 '16 at 19:19
Its an easy fix, but your version doesnt underline when he hovers on the entire h1 element as his original requested. – Cam Jan 08 '16 at 19:27
Also if he has many i would run .each() to do it for everyone of them. – Cam Jan 08 '16 at 19:28
Could someone edit the answer to include the .each()? I have quite a few – David Z Jan 08 '16 at 19:31
Anyways I couldn't get this code to work on my site for some reason - it didn't add the tags that I selected - and it also broke some other functions that I needed – David Z Jan 08 '16 at 19:37
could you provide a link to your site? I can add the .each() - one sec. – andi Jan 08 '16 at 19:39
Just updated the code and the fiddle. I'll take a look at your site. – andi Jan 08 '16 at 19:42
actually getting very close to the solution, I couldn't use insertBefore, etc because they were many tags of the same class and it would basically insert ALL the tags rather than just the one after it – David Z Jan 08 '16 at 19:42
@andi looks like your code is conflicting with an existing jQuery script, not too sure how or why... any work arounds? love the idea though – David Z Jan 08 '16 at 19:52
Do you get any error messages in the error console, to give a clue? – andi Jan 08 '16 at 19:54
No errors, I have your code live on the site and I've purged caches, do a hard refresh and take a look yourself :) slider is totally messed up lol, and tag not inserted – David Z Jan 08 '16 at 20:05
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/100185/discussion-between-andi-and-david-z). – andi Jan 08 '16 at 20:08
if you add a class to the inserted tag, remember to use a single ' instead, using " broke it – David Z Jan 08 '16 at 20:17

score 1 · Answer 3 · answered Jan 08 '16 at 19:25

Quick and easy way that works is to run a jQuery code such as this.

$('.slide-title').each(function() {
  var txt = $(this).find(".slider-category").html();
  $(this).find("span").remove();
  var ex = $(this).text();
  $(this).empty();

  $(txt+"<span class='extra-txt'>"+ex+"</span>").appendTo(this);
});

Add CSS such as

h1.slide-title:hover .extra-txt {
  text-decoration: underline;
}

h1.slide-title a {
  text-decoration: none;
}

h1.slide-title:hover a {
  text-decoration: none !important;
}

Here is a working version.

https://jsfiddle.net/mjtmtsa5/3/

Could you modify your code to simply insert the span tags to the unwrapped text and leave the original span tag alone? — David Z, Jan 08 '16 at 19:59

score -1 · Answer 4 · answered Jan 08 '16 at 19:11

-1

Try this :

$('h1').hover(function()
{
  $(this).contents().filter(function() {  
    return this.nodeType == 3 ? $(this).wrap('<u></u>') : null;  // nodeType == 3 returns the inner text of the target element
  });
});

Example : http://jsfiddle.net/DinoMyte/bvtngh57/151/

answered Jan 08 '16 at 19:11

DinoMyte

8,737
1
19
26

Doesnt meet to his request. – Cam Jan 08 '16 at 19:28
what makes you think it doesn't ? – DinoMyte Jan 08 '16 at 20:18
Doesnt hover, its syntaclly incorrect, and it will effect all h1.. -1 – Cam Jan 08 '16 at 21:12

How to underline on hover text within element that excludes a child element

4 Answers4