title: How to underline on hover text within element that excludes a child element
body: <p>Code is as follows:</p>
  
  <pre><code>&lt;h1 class="slide-title"&gt;
  &lt;span class="slider-category"&gt;
  &lt;a href="/test/test.html"&gt; Blocking irritating text&lt;/a&gt;
  &lt;/span&gt;
  Hong Kong Trip Nov 2015 – Day 3 Itinerary
  &lt;/h1&gt;
  </code></pre>
  
  <p>Using <code>h1.slide-title:hover</code> will affect the "Blocking irritating  text" within the span element as well.</p>
  
  <p>I <strong>ONLY</strong> want to underline on hover the following text "Hong Kong Trip Nov 2015 – Day 3 Itinerary", I <strong>DO NOT</strong> want the "Blocking irritating text" to be underlined when I hover over it.</p>
  
  <p>Is this possible with CSS or jQuery?</p>
  
  <p>Edit: question is not duplicate as I do not want to edit the HTML. Also as a side note, I would like the <code>&lt;span&gt;</code> element to underline on hover separately as well.</p>