When changing a color of a paragraph element, CSS hover stops working.
I made a demo to explain: https://jsfiddle.net/woan6b64/
After I change <p>'s color, the hover selector stops working.
My question is:
How can I change the hover effect with JavaScript?
How can I get hovering to work after a color change?
JSFiddle code:
var shift = 0;
function change() {
if (shift === 0) {
document.getElementById("box").style.backgroundColor = "black";
document.getElementById("text").style.color = "white";
document.getElementById("text").innerHTML = 'Good! Now click the box again.';
shift = 1;
} else {
document.getElementById("box").style.backgroundColor = "white";
document.getElementById("text").style.color = "black";
document.getElementById("text").innerHTML = 'Hover effect is now broken :(';
}
}
#box {
height: 100px;
width: 200px;
background-color: white;
}
p:hover {
color: green;
}
<div id='box' onclick='change()'>
<p id='text'>
Click me for this box to change color. (Notice how I turn green when hovered)
</p>
</div>
Stop it! Don't use !important if not necessary... your problem is that you set the color to black.
document.getElementById("text").style.color = "";
This will make the color inherit the right style.
How ever, this ain't the right solution either. You should add class to the box and then do:
#box {
height: 100px;
width: 200px;
background-color: white;
}
p:hover {
color: green;
}
#box.altered {
color: white;
background-color: black;
}
.altered p:hover {
color: red;
}
<div id="box" onclick="this.classList.toggle('altered')">
<p id='text'>
Click me for this box to change color. (Notice how I turn green when hovered)
</p>
</div>
Add a new class
// document.getElementById("box").style.backgroundColor = "black";
// document.getElementById("text").style.color = "white";
document.getElementById("text").classList.add("purple");
.purple {
color: purple;
}
If you want to do it with pure JS you need to listen for onmouseover event and onmouseout event, check the code that I made
var textElement = document.getElementById("text");
var defaultColor = textElement.style.color;
textElement.onmouseover = function(event) {
var currentElement = event.target;
currentElement.style.color = "red";
}
textElement.onmouseout = function(event) {
var currentElement = event.target;
currentElement.style.color = defaultColor;
}
<div id="parent">
<p id="text">
I am a text that change its text color :D
</p>
</div>
It's an issue with specificity, so you'll need to use !important on the color property to force it.
fiddle
NB: This isn't best practice. Depending on your intent, adding a class or simply unsetting the color may be the best option.
After setting the color, the hover is overridden. Use !important to force it:
p:hover{
color: green !important;
}
Related
I have a div named #increase-text-weight which says "INCREASE TEXT WEIGHT".
Whenever you click on it, the contents of another div named #post-content should get font-weight: 500 and the text of #increase-text-weight should be changed to "DECREASE TEXT WEIGHT".
When the div says "DECREASE TEXT WEIGHT" and you click on it,
#post-content
should get
font-weight: 300
and the text of
#increase-text-weight
should be changed to "INCREASE TEXT WEIGHT".
How can I do this?
EDIT:
I had tried doing it by getElementById but it didn't work.
Since you are learning, this is a short way to do this with two clases.
First of all, the id selector $('#test') gets the node element
Then attach a click event listener of to the reference.
After, the selector $(this), makes a reference to selector used in the event attached function, in this case we can say $(this) == $("#test").
After the dot, jQuery .toggleClass() method adds or remove a class from the element, also, if you pass a second true or false parameter, the method will add or remove the given class respectively.
So if you chain this two toggleClass() will add the class if it is not there or will remove it if it exist
$("#test").click(function(){ // also can be .on('click',function(){ ... })
$(this).toggleClass("decreased")
.toggleClass("increased");
});
.decreased {
font-weight: 100;
color: red;
cursor: pointer;
}
.increased {
font-weight: 300;
color: green;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="decreased">Increase my font weight!</div>
A quick way to do this could be to use and if and else statement.
$('#increase-text-weight').on('click', function() {
if ($(this).text() === 'INCREASE TEXT WEIGHT') {
$('#post-content').addClass('highlight');
$(this).text('DECREASE TEXT WEIGHT');
} else {
$(this).text('INCREASE TEXT WEIGHT');
$('#post-content').removeClass('highlight');
}
});
$('#increase-text-weight').on('click', function() {
if ($(this).text() === 'INCREASE TEXT WEIGHT') {
$('#post-content').addClass('highlight');
$(this).text('DECREASE TEXT WEIGHT');
} else {
$(this).text('INCREASE TEXT WEIGHT');
$('#post-content').removeClass('highlight');
}
});
div {
width: 100%;
height: 100px;
text-align: center;
border: 1px solid;
margin: 0 0 25px 0;
cursor: pointer;
}
.highlight {
font-weight: 900;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='increase-text-weight'>INCREASE TEXT WEIGHT</div>
<div id='post-content'>Text text and text</div>
You can simply do this using an onClick event on the div you want to be changed. Each time it is clicked we check which class is associated with that <div>, and then do the required modifications to that <div> based on the class, like updating the text content inside the div with .text(), and then switching out the classes like so:
var myDiv = $("#test");
myDiv.click(function() {
if (myDiv.hasClass("decreased")) {
myDiv.removeClass("decreased")
.addClass("increased")
.text("Decrease my font weight!")
} else {
myDiv.removeClass("increased")
.addClass("decreased")
.text("Increase my font weight!")
}
});
.decreased {
font-weight: 100;
color: red;
cursor: pointer;
}
.increased {
font-weight: 300;
color: green;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="decreased">Increase my font weight!</div>
Although you can easily do this with pure JavaScript like so:
var myDiv = document.getElementById("test");
myDiv.addEventListener("click", function() {
if (myDiv.className === "decreased") {
myDiv.classList.remove("decreased");
myDiv.className = "increased";
myDiv.textContent = "Decrease my font weight!";
} else {
myDiv.classList.remove("increased");
myDiv.className = "decreased";
myDiv.textContent = "Increase my font weight!";
}
});
There is a model at http://www.lesha.wemakesites.ru/.
Once focused at plus icon it is replaced by a button "Follow me".
What I wanna do is to change this button to a red one saying "Unfollow" once it is clicked. It is super if someone knows how to build it reversed too so that when an "Unfollow" button is clicked, it becomes "Follow" one.
Pull in jquery in your project. This cannot be achieved with css alone.
$('#btn').on('click', function() {
if (!$(this).hasClass("followed")) {
$(this).addClass("followed btn-red");
$(this).removeClass("btn-blue");
$(this).html("Followed");
} else {
$(this).addClass("btn-blue");
$(this).removeClass("followed btn-red");
$(this).html("Follow");
}
});
#btn {
border: none;
outline: none;
padding: 10px 12px;
color: #fff;
}
.btn-blue {
background-color: blue;
}
.btn-red {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn" class="btn-blue">Follow</button>
Make the JS as simple as possible to understand.
I would suggest having two versions of the button and you can use
display: none;
for the one that is currently not in use.
If users are switching back between following you can store your state in a variable.
let following = true;
let btn = document.getElementById("btn");
if (!!following) {
btn.style.dispaly = "none";
following = false;
} else {
btn.style.display = "block";
following = false;
}
This may be absurd. But I was following step by step some tutorial codes to change color the textarea box while I was texting, and works fine (changes the text to uppercase and red while writing), but I want only one word to change. In another question, they use div tag elements, but I want to use textarea tag element. Can anyone point me in the right direction?
So, this is the code:
document.getElementById("text").addEventListener("keypress", colors);
function colors() {
var x = document.getElementById("text");
var word = document.getElementById("text").value;
x.value = x.value.toUpperCase();
x.style.color = "red";
}
<textarea name="text" id="text">Some text</textarea>
You really can't do this with a textarea. Fortunately you can use a div to emulate a textarea so you can still edit within it by adding contenteditable="true" to the tag
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
You can create a <textarea> element for each word, use if condition withing colors function to set color at style attribute for that specific <textarea> element .value.
textarea {
border: none;
outline: none;
font-size: 14px;
width: 50px;
height: 16px;
resize: none;
overflow: hidden;
margin: 0px;
padding: 0px;
}
<textarea name="text1" class="text">Hello </textarea><textarea name="text2" class="text">World</textarea>
<script>
var textareas = document.querySelectorAll("textarea");
for (var i = 0; i < textareas.length; i++) {
textareas[i].addEventListener("keypress", colors);
}
function colors() {
if (this.value.indexOf("World") > -1) {
this.value = this.value.toUpperCase();
this.style.color = "red";
}
}
</script>
I am hoping to get help with my IF statement in javascript. What is happening is that its not changing colour when the button is clicked.
This is what i am trying to do. When the next button is clicked, the following should happen
If the background colour of the light div is #ff0000 (red), it should change to #ffff00 (amber)
If the background colour of the light div is #ffff00 (amber), it should change to #00ff00 (green)
If the background colour of the light div is #00ff00 (green), it should change to #ff0000 (red)
HTML:
<div class="main">
<h1>Traffic Light</h1>
<div class="light">
</div>
</br>
<button id="next" onClick="setBgColour" type="button">Next</button>
</div>
css:
.light
{
background-color: #ff0000;
width: 100px;
height: 20px;
margin-left: auto;
margin-right: auto;
}
JavaScipt:
function setBgColour(){
if(document.getElementsByClassName("light")[0].style.backgroundColor = '#ff0000')
{
document.getElementsByClassName("light")[0].style.backgroundColor = '#ffff00';
}
else if (document.getElementsByClassName("light")[0].style.backgroundColor = '#ffff00')
{
document.getElementsByClassName("light")[0].style.backgroundColor = '#00ff00';
}
else
document.getElementsByClassName("light")[0].style.backgroundColor = '#ff0000';
}
window.onload = function(){
document.getElementById('next').addEventListener('click', setBgColour);
};
You can simplify this a lot:
var lightnumber = 0; // this variable saves the current state of the traffic light
var lights = [
"#ff0000", "#ffff00", "#00ff00"
]; // this variable saves all possible lights.
setBgColour = function() {
// at first we decide which colour shall be next, so we increase
// the lightnumber by one, except, if we are already at green, then we start over at 0
lightnumber = lightnumber == (lights.length - 1) ? 0 : lightnumber + 1;
// and here we set the light according to our lightnumber variable
document.getElementsByClassName("light")[0].style.backgroundColor = lights[lightnumber];
}
.light {
background-color: #ff0000;
width: 100px;
height: 20px;
margin-left: auto;
margin-right: auto;
}
<h1>Traffic Light</h1>
<div class="light"></div>
</br>
<button id="next" onClick="setBgColour()" type="button">Next</button>
</div>
Your javascript code should be like this:-
function setBgColour() {
if (document.getElementsByClassName("light")[0].style.backgroundColor == '#ff0000') {
document.getElementsByClassName("light")[0].style.backgroundColor = '#ffff00';
} else if (document.getElementsByClassName("light")[0].style.backgroundColor == '#ffff00') {
document.getElementsByClassName("light")[0].style.backgroundColor = '#00ff00';
} else {
document.getElementsByClassName("light")[0].style.backgroundColor = '#ff0000';
}
window.onload = function () {
document.getElementById('next').addEventListener('click', setBgColour);
};
}
i.e. inside if you need to use ==, not = which is an assignment operator.
I'm confused why the onclick function doesn't register the first time it is clicked. Each div with the onclick trigger has to be clicked twice the first time.
function selected(elmnt) {
if (elmnt.style.backgroundColor == "transparent")
elmnt.style.backgroundColor = "#990000"
else
elmnt.style.backgroundColor = "transparent"
}
#container {
background-color: transparent;
height: 100px;
width: 100px;
}
<div id="container" onclick="selected(this)">click me</div>
Am I missing something here?
It is because your element style is not transparent. Only your element's computedStyle is. Try this:
function selected(elmnt) {
if (elmnt.style.backgroundColor == "transparent")
elmnt.style.backgroundColor = "#990000"
else
elmnt.style.backgroundColor = "transparent"
}
#container {
background-color: transparent;
height: 100px;
width: 100px;
}
<div id="container" onclick="selected(this)" style="background-color: transparent;">click me</div>
There's also the natural way:
function selected(elmnt) {
if (elmnt.style.backgroundColor == "")
elmnt.style.backgroundColor = "#990000"
else
elmnt.style.backgroundColor = ""
}
#container {
background-color: transparent;
height: 100px;
width: 100px;
}
<div id="container" onclick="selected(this)">click me</div>
The element doesn't start with a background-color of transparent so it always goes to the else. Changing the div to
<div id="container" onclick="selected(this)" style='background-color:transparent'>www</div>
will make it work. A css style sheet doesnt' append style to the DOM elements physically.
Both answers above absolutely agree initially style is not set.
Just to tell you for next time how to DEBUG it
us console.log() click F12 for developer tools then console tab
I am fan of short IFs when simple IF
<script>
function selected(elmnt) {
console.log(elmnt.style.backgroundColor)
var bG= elmnt.style.backgroundColor
elmnt.style.backgroundColor = ( bG == '' || bG == "transparent") ? "#990000" : "transparent";
}
</script>