How can I add a mouseover effect to a span? - javascript

I'm trying to do something, like when you Mouseover on text inside a span, the background changes.
My code:
<script>
function unhighlight(x) {
x.style.backgroundColor="transparent"
}
function highlight(x) {
x.style.backgroundColor="red"
}
</script>
<span onmouseover="highlight(this)" onmouseout="unhighlight(this)">
<h2>What's New</h2>
</span>
The reason I don't apply it to the h2 is a little complicated. Don't need to explain. Help?

Your javacript is fine.
The span element is the inline level generic container. It also helps
to inform the structure of document, but it is used to group or wrap
other inline elements and/or text, rather than block level elements.
So h2 is not valid child for span:
html standard
function unhighlight(x) {
x.style.backgroundColor = "transparent"
}
function highlight(x) {
x.style.backgroundColor = "red"
}
span {
display: block;
}
<span onmouseover="highlight(this);" onmouseout="unhighlight(this)"><h2>What's New</h2></span>
I suggest for containers to use block elements like div. And also i suggest to use css for this:
div:hover {
background: red;
}
<div>
<h2>What's New</h2>
</div>

Just set CSS to <span>
display: block;

You need to change your span element to an inline block for this to work :
span {
display: inline-block;
}
But note that you can achieve the same effect with CSS only :
span {
display: inline-block;
background-color: transparent;
}
span:hover {
background-color: red;
}

You don't need javascript to do it, just with HTML and CSS :
#myText {
display: inline-block;
background-color: transparent;
}
#myText:hover {
display: inline-block;
background-color: red;
}
<span id="myText"><h2>What's New</h2></span>

Related

How do I bind style to onclick element using Javascript?

Whenever I click on the left arrow icon, I want the style of the menu to change. Is it possible to bind specific css style when using onclick function?
i.fas.fa-chevron-circle-left.left
#sidebar-container .menu
width: 18rem
transition: 200ms
How I want it to look after onclick function.
#sidebar-container .menu
width: 10rem
Make a class containing the styles you want and you can toggle those on and off using javascript:
document.getElementById('my-element').classList.toggle('my-class');
This will add the my-class class if the element doesnt have it, and remove the my-class class if the element does have it. You may also use classList.add and classList.remove if you'd like to set it on or off.
You can easily bind this to a button with inline javascript. It is recomended to use event listeners but this should do the trick:
<button onclick="document.getElementById('my-element').classList.toggle('my-class')">Click me to toggle the class</button>
You can change my-elemment to be the ID of the element you want to toggle the class for and my-class to the classname you'd like to use.
It is possible to bind to an element. You can use document.querySelector() to find that element.
for example:
const el = document.querySelector("i.fas.fa-chevron-circle-left.left")
el.addEventListener("click", function(){
el.style.transition = "";
});
It's almost always easier to just add an overriding class instead of editing single style properties:
el.classList.add("override");
and have that class in css somewhere.
.override {
transition: none !important;
}
You can create a secondary class for styles you want when it is clicked. You can toggle the class like this
const menu = document.querySelector("#sidebar-container .menu");
menu.addEventListener('click', function () {
// by adding class name
menu.classList.toggle("menu-clicked");
});
#sidebar-container {
width: 200px;
height: 100vh;
background: #ccc;
display: flex;
padding-top: 20px;
align-items: flex-start;
justify-content: center;
transition: all ease 200ms;
}
#sidebar-container .menu {
background: #ddd;
padding: 20px;
display: block;
width: 100%;
cursor: pointer;
}
#sidebar-container .menu.menu-clicked {
background: green;
}
<div id="sidebar-container">
<div class="menu">
Menu
</div>
</div>
Hope it helps. Cheers!

Hover on parent but not on child element

I have an issue where I want to activate hover state on a link when hovering on the container anywhere but except on two buttons save and close. CSS approach is preferred but if not vanilla JavaScript would be fine. Please have have look I have created a codepen
You can not trigger pseudo events. you can give it same styling when the box is hovered:
.box {
display: flex;
padding: 20px;
border-bottom: 1px solid #ccc;
transition: background .3s ease-in-out;
&:hover {
background: #f1f1f1;
a {
color: #525199;
background-color: #e6e6f0;
border-color: #525199;
}
}
This is not possible with pure CSS, as explained on the question How to style the parent element when hovering a child element?
The solution, then, is to add some Javascript to style the parent element, for example by adding a class to the parent element. A simple code snippet to achieve this with your solution, would be the following:
document.querySelectorAll('.save, .cancel').forEach(function(button) {
button.addEventListener("mouseover", function() {
button.parentNode.parentNode.className = 'box nohover';
});
button.addEventListener("mouseout", function() {
button.parentNode.parentNode.className = 'box';
});
});
And you'd then need to style the {{nohover}} class by not changing the background:
.nohover:hover {
background: none;
}
See this codepen for a working demo.
try this:
.box:hover :not(.box--right):hover a {
color: #525199;
background-color: #e6e6f0;
border-color: #525199;
}

Using css/js, hide <h2> in a div when hovered over

What I've tried (css):
div:hover #h2 {
color: transparent;
}
I want to hide text in a div like this:
<div>
<h2>text</h2>
</div>
You should remove the #:
div:hover h2 {
color: transparent;
}
A # indicates an id instead of a tag name (so you were selecting id="h2").
this will hide H2 tag on DIV hover
div:hover h2{
display: none;
}
if you need fix height in your DIV you can use this one:
div:hover h2{
visibility: hidden;
}
UPDATE:
duo to questioner comment, if you want to use a specific id, do like this:
<div id="spdiv"><h2>message</h2></div>
and in css
#spdiv:hover h2{
display: none;
}
using # helps you to specify element id

Show div when post has class

Update
I'd modded the CSS given by David Thomas a bit. Its now a banner.
.div.popular::before {
/* setting the default styles for
the generated content: */
display: block;
width: 10em;
height: 2em;
line-height: 2em;
text-align: center;
background: #F60;
color: #fff;
font-size: 1.4rem;
position: absolute;
top: 30px;
right: 0px;
z-index: 1;
}
I would like to make a folded corner sort of like in this post: Folded banner using css
--- Original post ---
Let me first explain what I'm trying to do. I'm trying to give some post some extra attention by making a little circle with some call-to-action text in it.
But I only want this to trigger when a div has a specific class.
So if the div the class populair or sale I would like to have a little circle show up on that post. This script what I am using right now.
$(document).ready(function($){
if($("#front-page-items").hasClass('populair')){
$(".populair-div").show();
}
if($("#front-page-items").hasClass('sale')){
$(".sale-div").show();
}
});
And this HTML:
<div class="populair-div" style="display:none;">
<strong>Populair</strong>
</div>
<div class="sale-div" style="display:none;">
<strong>Sale</strong>
</div>
But this only show's the populair-div and not the other one. I'm guessing my script is wrong. Should I use else for all the other call-to-action classes?
$(document).ready(function($){
if($("#front-page-items").hasClass('populair')){
$(".populair-div").show();
}
else($("#front-page-items").hasClass('sale')){
$(".sale-div").show();
}
else($("#front-page-items").hasClass('Free')){
$(".free-div").show();
} // and so on
});
Is there someone that could help me out? Also is it possible to echo the div so I don't have to write a whole div for every call-to-action div?
For something like this, where the displayed text is explicitly linked to the class-name of the element it's easiest to use CSS and the generated content available, effectively hiding the elements you don't wish to show by default and then explicitly allowing elements you want to show, along with the generated content of those elements (using the ::before and ::after pseudo-elements:
div {
/* preventing <div> elements
from showing by default: */
display: none;
}
div.populair-div,
div.sale-div {
/* ensuring that elements matching
the selectors above (<div>
elements with either the 'sale-div'
or 'populair-div' class-names
are shown: */
display: block;
}
div.populair-div::before,
div.sale-div::before {
/* setting the default styles for
the generated content: */
display: block;
width: 4em;
height: 4em;
line-height: 4em;
text-align: center;
border: 3px solid transparent;
border-radius: 50%;
}
div.populair-div::before {
/* setting the text with the
"content" property: */
content: "Popular";
/* providing a specific colour
for the generated contents'
border: */
border-color: #0c0;
}
div.sale-div::before {
content: "Sale";
border-color: #f90;
}
/* entirely irrelevant, just so you can
see a (slightly prettified) difference
should you remove the default display
property for the <div> elements: */
code {
background-color: #ddd;
}
em {
font-style: italic;
}
<div class="neither-popular-nor-sale">
<p>
This element should not be shown, it has neither a class of <code>"populair-div"</code> <em>or</em> <code>"sale-div"</code>.
</p>
</div>
<div class="populair-div">
</div>
<div>Also not to be shown.</div>
<div class="sale-div">
</div>
You can use toggle function for this. It will be shorter and clearer.
Display or hide the matched elements.
Note: The buttons is for tests.
$(document).ready(function($){
init();
});
function init() {
$(".populair-div").toggle($("#front-page-items").hasClass('populair'));
$(".sale-div").toggle($("#front-page-items").hasClass('sale'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="front-page-items" class="populair sale"></div>
<div class="populair-div">populair-div</div>
<div class="sale-div">sale-div</div>
<hr />
<button onclick="document.getElementById('front-page-items').classList.toggle('populair');init()">toggle populair</button>
<button onclick="document.getElementById('front-page-items').classList.toggle('sale');init()">toggle sale</button>

Using jQuery on the select class not all the divs with the same class

Not really sure how to phrase that in the title. Anyways, what I'm saying is that I have three divs with the same class name. I want to add a mouseover function that only works on the select div, not all of them at once. For example :(https://jsfiddle.net/1y2jw2y0/) this makes all the divs show/hide, I only want the selected one to act on the jQuery function.
Html:
<div class="box">
<p class="show">Show</p>
<p class="hide">hide</p>
</div>
<div class="box">
<p class="show">Show</p>
<p class="hide">hide</p>
</div>
<div class="box">
<p class="show">Show</p>
<p class="hide">hide</p>
</div>
Css:
.box {
display: inline-block;
width: 150px;
height: 150px;
border: 1px solid #000;
}
.hide {
display: none;
}
jQuery:
$(document).ready(function() {
$('.box').mouseover(function() {
$('.hide').show();
$('.show').hide();
});
$('.box').mouseleave(function() {
$('.hide').hide();
$('.show').show();
});
});
Use this to target the "selected" element, then select the child with find() or children():
$(document).ready(function() {
$('.box').mouseover(function() {
$(this).children('.hide').show();
$(this).children('.show').hide();
});
$('.box').mouseleave(function() {
$(this).children('.hide').hide();
$(this).children('.show').show();
});
});
JSFiddle Demo
Edited, to outline the performance issues brought up:
For basic details about the difference between find and children, this answer is a good resource.
In this case, I found .find() to be faster as a whole, usually ~.2ms.
After extensive testing, It appears there is very little, or no difference between using find(), or using $('.selector', this)
Overall, the results were similar. In some cases, it appears $('.selector', this) is slower, in others find().
However, find does give you extra functionality that cannot be achieved with $('.selector', this), such as a direct child selector: .selector > .anotherone, or caching the jQuery object to save resources.
Summary: There isn't much difference, it all depends on your case, and what you prefer.
You can do it all in CSS:
.box:hover .hide {
display: block;
}
.box:hover .show {
display: none;
}
Example: http://jsfiddle.net/Zy2Ny/
If you really want to do it in JavaScript, simply use $(this) and find():
More information about whether children() or find() is faster.
$(".box").mouseover(function() {
$(this).find(".hide").show();
$(this).find(".show").hide();
});
$(".box").mouseleave(function() {
$(this).find(".hide").hide();
$(this).find(".show").show();
});
.box {
display: inline-block;
width: 150px;
height: 150px;
border: 1px solid #000;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxes">
<div class="box">
<p class="show">Show</p>
<p class="hide">Hide</p>
</div>
<div class="box">
<p class="show">Show</p>
<p class="hide">Hide</p>
</div>
<div class="box">
<p class="show">Show</p>
<p class="hide">Hide</p>
</div>
</div>
Example: https://jsfiddle.net/1y2jw2y0/5/
Add a 'this' along with the selector,
$(document).ready(function() {
$('.box').mouseover(function() {
$('.hide', this).show();
$('.show', this).hide();
});
$('.box').mouseleave(function() {
$('.hide', this).hide();
$('.show', this).show();
});
});
Example: https://jsfiddle.net/1y2jw2y0/6/
So basically you have to select the child selector of the mouse hovered element instead.
NOTE:- You can do this using find() & children() jquery API's as well. But it's bit slower than selecting directly.
And why not doing with pure css? See the example below,
.box {
display: inline-block;
width: 150px;
height: 150px;
border: 1px solid #000;
}
.hide,
.box:hover > .show {
display: none;
}
.box:hover > .hide {
display: block;
}
Example: https://jsfiddle.net/1y2jw2y0/3/
Change your syntax to
$('.box').mouseover(function() {
$(this).find('.hide').show();
$(this).find('.show').hide();
});
Just navigate from the current element which trigerred the event to its child elements using $(this)
The problem is that your selector is targeting all of the divs with that class name in the document. You need to limit the scope to just the divs inside of the box you care about. One way to do this would be
$(this).find('.hide').show()
Instead of
$(".hide").show();
See here https://jsfiddle.net/1y2jw2y0/1/
You can see: $('.box') select all .box div.
So that $('.hide') select all .hide p => when you click on a box, all .hide p are affected.
You can fix as following code:
$(this).select('.hide').hide()
$(this).select('.show').show()

Categories