Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save JoeSz/bdfb424a1963c693851b75a56a10f737 to your computer and use it in GitHub Desktop.
Save JoeSz/bdfb424a1963c693851b75a56a10f737 to your computer and use it in GitHub Desktop.
Highlight keywords of text on hover

Highlight keywords of text on hover

Just a little experiment. When hovering over the article with your mouse, some keywords from the text should be easy readable while the rest should be darker.

A Pen by Bas Groothedde on CodePen.

License.

<div id="centerbox">
<h1>Hover one of the articles</h1>
<article class="highlight">
<p>
This is some long <span>text</span> with some words that might turn up <span>more important</span> than other words. The <span>interesting</span> part about this idea, is that you can <span>hide keywords</span> in the actual text you're reading. Like this, <span>on hover</span>, you can actually <span>just show the keywords</span>.
</p>
</article>
<article class="highlight">
<p>
This is some long <span>text</span> with some words that might turn up <span>more important</span> than other words. The <span>interesting</span> part about this idea, is that you can <span>hide keywords</span> in the actual text you're reading. Like this, <span>on hover</span>, you can actually <span>just show the keywords</span>.
</p>
</article>
</div>
/**
Javascript isn't required for this effect,
I just added a quick piece of jQuery code
to simulate a hover for the animated preview
on CodePen.io.
*/
// simulation code, ignore it.
$(function() {
setTimeout(function() {
$("article.highlight").toggleClass("hover");
setTimeout(function() {
$("article.highlight").toggleClass("hover");
}, 2000);
}, 1000);
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
*, *::before, *::after {
box-sizing: border-box;
font-family: "Roboto", "Helvetica", sans-serif;
font-weight: 300;
}
body, html {
margin: 0;
padding: 0;
}
body {
background: #331100;
padding: 5px;
h1 {
margin: 0 0 .5em 0;
color: #ffffff;
text-shadow: 0px 0px 10px #000000;
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
}
#centerbox {
width: 500px;
margin: 0 auto;
}
}
article.highlight {
margin-bottom: 10px;
width: 500px;
padding: 5px;
font-size: 0.9em;
color: #cecece;
background: #000000;
background: rgba(0, 0, 0, 0.5);
border-radius: 5px;
box-shadow: 0px 0px 10px #000000;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
/*
all elements in this element will change
color through a 0.1 second lasting linear
transition.
*/
* {
transition: color 0.1s linear;
}
// make sure span keeps this color
span {
color: #cecece !important;
}
p {
margin: 0;
}
/*
change the text-color on hover, the color
in span will not change due to !important.
additionally, the .hover class on the
article.highlight element will achieve
the same result.
*/
&:hover, &.hover {
color: #333333;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment