Highlight an Individual Word Within a Text Block on Hover

Highlight an individual word within a text block on hover

This seems like a good task for http://letteringjs.com/

You can set it up to create the spans for you at word barriers.

JSFiddle with your example: http://jsfiddle.net/3HdKH/

From their tutorial: https://github.com/davatron5000/Lettering.js/wiki/Wrapping-words-with-lettering%28%27words%27%29

Using:

$(document).ready(function() {
  $(".word_split").lettering('words');
});

This

<p class="word_split">Don't break my heart.</p>

Becomes:

<p class="word_split">
  <span class="word1">Don't</span>
  <span class="word2">break</span>
  <span class="word3">my</span>
  <span class="word4">heart.</span>
</p>

Then you can use the following CSS:

.word_split span:hover {
    font-weight:bold;
}

Highlight multiple words when hovering over a single word or phrase?

I smashed a little Fiddle together to tackle your problem: http://jsfiddle.net/6BH27/

You have to add a span around every word you want to connect and put the word in the other language as the title attribute of it. The rest will be managed by Javascript.

JS Code:

$('span[title]').hover(
    function() {
        $(this).addClass('highlight');
        $('span:contains("'+$(this).attr('title')+'")').addClass('highlight');
    },
    function() {
        $(this).removeClass('highlight');
        $('span:contains("'+$(this).attr('title')+'")').removeClass('highlight');
    }
);

Edit: This is what it will look like on your page. http://jsfiddle.net/6BH27/1/

Highlight paragraph line by line on hover

There's no direct way to get a single line of text within a larger element. To achieve what you require you could wrap each word of the p tag in its own span. Then on hover of the span tags you can highlight the siblings which are at the same offset().top. Something like this:

$('p').html(function() {
    return $(this).text().replace(/\w+[,.]?\s+?/g, "<span>$&</span>")
});

$('p').on('mouseenter', 'span', function() {
    var $span = $(this);
    $('p span').filter(function() {
        return $(this).offset().top == $span.offset().top;
    }).toggleClass('hover');
}).on('mouseleave', 'span', function() {
    $('p span').removeClass('hover');
})

Working example

Alternatively you could append a single div element to a parent of the p which follows the mouse movement when hovered over the p and acts as a line reading guide:

$('.text-block')
    .append('<div class="line-marker"> </div>')
    .on('mousemove', function(e) {
        $(this).find('.line-marker').css('top', e.clientY);
    })

.line-marker {
    display: none;
}

.text-block:hover .line-marker {
    position: absolute;
    width: 100%;
    background-color: #CC0;
    display: block;
    z-index: -1;
}

Working example

On hover, highlight div and all other divs with the same text

You can try something like this.

   $(document).ready(function () {
    $('.users > .user').mouseenter(function () {
      var current = $(this);
      $('.users > .user').each(function () {
        // Contains Matches For Text Everywhere In Word
        // if ($(this).is(":contains('" + current.text() + "')")) {
        // This way you match full text
        // Using Trim To Also Make Sure You Have No Empty Spaces
        if ($(this).text().trim() === current.text().trim()) {
          $(this).closest('.users > .user').addClass('bg2');
        }
      });
    });
    $('.users > .user').mouseleave(function () {
      $('.users > .user').removeClass("bg2");
    });
  });

But as others have said, you might want to do some research first before asking question that were probably answered before.

Words highlight on mouse over

First highlight the word under the cursor then show the meaning of it, check my fiddle: http://jsfiddle.net/shahe_masoyan/z7nkU/1/

HTML

    <div>
        <span>This text is a test text</span>
    </div>

JavaScript

$('div').each(function() {
    var $this = $(this);
    $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
});

$('div span').hover(
    function() { 
        $(this).css('background-color','#ffff66'); 
        alert(getTheMeaningOfTheWord($(this).html()));
    },
    function() { 
        $(this).css('background-color',''); 
    }
);

function getTheMeaningOfTheWord(word){

    return word+' = theMeaning';
}

Not highlighting text while hovering over list of navigation bar

First look at your anchor links, you made a mistake in them, place a link text between . Second apply hover rule over li instead of li a:

ul {list-style-type: none;margin: 0;padding: 0;width: 200px;background-color: silver;}
li a {display: block;    padding: 8px 16px;text-decoration: none;}
/* Change the link color on hover */li:hover {background-color: #555;color: white;}

<ul>  <li>    <a href="#"> Home</a></li>  <li>    <a href="#">Contact</a></li>  <li>    <a href="#">Gallery</a></li></ul>

How to make :hover only affect lettering instead of the box?

Try changing

.navigation-bar li a:hover, 
a:focus {
  background-color: #111;
}

to

.navigation-bar li a:hover, 
a:focus {
  color: #111;
}

This works because background-color targets the fill color of the element while color targets the color of the text.

Simultaneously highlight two associated words on hover (HTML, JS, PHP)

I made three changes in your code: 1. You were using the same variable i for two nested loops. So, I named the second variable as j. 2: I switched the position of the HTML and the JavaScript code as the JavaScript code was referring to the HTML tags which were written after the JavaScript code. 3: I have reduced the JavaScript code, as requested by you.

<div class="wrapper_class">
<span class="classA">Le</span>
<span class="classB">chat</span>
<span class="classC">noir</span>
<span class="classA">The</span>
<span class="classC">black</span>
<span class="classB">cat</span>
</div>

<script type="text/javascript">
<?php
$chars = ['A','B','C'];
for($i=0;$i<count($chars);$i++){
?>
var span<?php echo $chars[$i]; ?> = document.getElementsByClassName('class<?php echo $chars[$i]; ?>');
var i = 0;
while(i < span<?php echo $chars[$i]; ?>.length){
    span<?php echo $chars[$i]; ?>[i].onmouseover = function change(){
        var j = 0;
        while(j < span<?php echo $chars[$i]; ?>.length){
            span<?php echo $chars[$i]; ?>[j].style.color = 'red';
            j++;
        }
    }

    span<?php echo $chars[$i]; ?>[i].onmouseout = function change(){
        var j = 0;
        while(j < span<?php echo $chars[$i]; ?>.length){
            span<?php echo $chars[$i]; ?>[j].style.color = 'black';
            j++;
        }
    }

    i++;
}
<?php } ?>
</script>

<style type="text/css">
.classA:hover {
  color: blue;
}

.classB:hover {
  color: blue;
}

.classB:hover {
  color: blue;
}
</style>

Highlight table rows on hover containing same info with JS or jQ

// Mouse over event handler
$('table').on('mouseover', 'td', function() {
    // Store the hovered cell's text in a variable
    var textToMatch = $(this).text();

    // Loop through every `td` element
    $('td').each(function() {
        // Pull selected `td` element's text
        var text = $(this).text();

        // Compare this with initial text and add matching class if it matches
        if (textToMatch === text)
            $(this).parent().addClass('matching');
    });
});

// Mouse out event handler
// This simply removes the matching styling
$('table').on('mouseout', 'td', function() {
    $('.matching').removeClass('matching');
});

JSFiddle demo.

Note that I've modified your CSS slightly to add:

tr:hover, tr.hover, tr.matching {
    background: #E5E5E5;
}

picture on hover show text under it

If I understand correctly, what you are trying to achieve when the the image is hovered it will do the following:

1. Image will 'move' upwards
2. Text will display below

There are several ways to achieve this, what I would do is:

1. Wrap your image and text, this way the hover event can cover the elements inside:

  <div class='wrapper'>
   <img src="pics/ii.jpg" class="crd_1">
   <p class="crd1">hskgnskg<br>kdjfehbdbdgdf<br>jdbhfkdf</p>
  <div/>

2. Set your texts 'p' tags to hidden: display:none
3. Target the elements accordingly under wrapper like so:

.wrapper:hover image {
    transform: translateY(-35px);
    height: 320px;
    padding-bottom: 120px;
}
.wrapper:hover p {
    display: unset;
}

---

Related Topics