I know it's a really basic thing but I can't change the button background colour using javascript. I want to change it using the class so i can do it for multiple classes. The javascript does link to the html.
The button code is:
<button class ="buttonlink" onmouseover='hoverOver()'onclick="location.href='aboutme.html'">About Me</button><br>
The function i tried is:
function hoverOver(){
var x = document.getElementsByClass('buttonlink');
alert("x");
}
I know this question has been asked before probably but I look and I couldn't find anything that directly linked, I am really new to this and don't really know what I am doing.
Changing a buttons background color using a mouse hover is not done with Javascript(although it can be). The proper way to do it is with CSS using:
a.button:hover
If you want the background of a button to change when hovering over another part of the screen, then use javascript.
Here's a quick example:
a.button a:hover{
background: #FF0;
}
Related
I am trying to change the color of the active category/page.
I don't want to modify files and anyway, I can't, so I am trying to change it through:
Appearance > Menus
Putting the HTML code into the Navigation Label of the page I want to customize.
I found one code and it seems to work properly:
<span style=”color: #a57a6b;”>Home</span>
But this code changes the color at all.
How could I transform it to work only while in the active module?
Run in Browser console
Array.prototype.slice.call(document.querySelectorAll('span')).filter(function (el) {return el.textContent === 'Home'})[0].style.color = "blue";
Where ...color = "blue" is color what you want
HTML by itself has static properties.
Changing the color must change the color: parameter in the HTML language itself. Do you want to consider using additional languages like CSS?
If you only rely on full HTML, color change can be done by redirecting a different page with the same data and a different color: attribute.
I am trying to create a dark mode toggle button with a checkbox (I will eventually change to a toggle in CSS). So far, I was able to change the elements in my Javascript canvas to be in "dark mode" and changed their color easily but is there a way I can use this same switch/checkbox in the Javascript to also toggle the CSS portion? I do not want to create another checkbox to change the background color of the HTML. I tried the method below with no result. I want the checkbox to basically turn the background of the webpage black and go back to white if unchecked. My full code is on CodePen https://codepen.io/Fragile404/pen/VxZVxm
body {
background-color: white;
}
body.checkbox: checked;
{
background-color: black;
}
You'll need to use JavaScript for this. Change your final if to:
if(darkMode.checked) {
toggleColor = (0,0,0);
document.body.style.backgroundColor= 'black';
} else {
toggleColor = (255,255,255);
document.body.style.backgroundColor = 'white';
}
Why? CSS only parses forwards and downwards. Which means you can use a parent condition in order to style a child and you can use a condition on a previous sibling to style up a later one, but not the other way around.
There were many discussions around the subject and attempts to change the status-quo but, in reality, if CSS would also parse backwards, web would be ten fold slower, at least.
Hey guys I am new to wordpress and have this task of getting green button to blue. So I found this button but its in anchor tag in class menu-separator is there any way that I can type custom css to make color blue.
right now I have this
.menu-separator .button{background-color: blue !important;}
Wont work because a is missing.
First off you put
.button
You need
a button
Also you cloud use this
<buttton style="background-color: green;">blah blah</button>
Though obviously you'll want to use CSS but just to test to make sure the problem isn't coming from somewhere else try that as well if the whole buttoninstead of .button doesn't work
Also we can't see all your code so this makes it a little harder to help because I don't know how nested the button is.
I have inherited a wordpress site using a theme. There is a background color on hover in the portfolio section of the site that we want changed. I cannot find where this color is declared at so I can change it. I thought it was an element called gallerySelectorList but nothing I did changed the color. The demo site of this theme is here : http://demo.pixelentity.com/?surreal
If anyone can help me that would be great I am losing my mind trying to track this thing down and change it. I posted on the creator of the theme's forum but got no where.
Within the Chrome Developer Tools you can invoke the :hover state of any element. In this case, you want to do so for the li wrapping the link. When do we do this, we see the color is set here:
.gallerySelectorList li:hover {
background: #83103e;
}
This code is located within your HTML file:
It looks like it's not actually a hover, but more so being faded in background color. Found then pink color in the class thumbTextWrap.
.thumbImage .thumbTextWrap { background:#8b133c; }
When I changed that or removed it changed the background hover color as needed in the dev tools.
To help protect users, you can't really style upload's with CSS. So, the solution then is to hide the real upload and show the user some other element that looks how you want.
I started a JSFiddle that shows how you could mask an invisiable real upload over a simple button or something so that you could style the button - but still get the user to click the upload input.
However, the problem is that I can't get the hover states to work since the real input is floating above the button.
Am I approaching this problem wrong? How do you style upload inputs?
After playing around some more I finally got it working by making the input a child of the Upload button element. I had to make the upload button a div also since it's not correct to have an input as the child of a button.
See it in action here
If I understand the question, this is what you want to achieve
jsfiddle.net/yVFWJ/1/
.button {
width: 47px;
height: 19px;
cursor: pointer;
text-indent: -9999px;
border: none;
background-image: url(http://www.hudson-realestate.com/us/images/uploadButton.gif);
}
Hm... You could use document.onmousemove event. In there you can check if your mouse position is inside the button area. If it is, simply change the class of button to eg "send_button_hover". If it's not, change the class to just eg "send_button".
You can do it using pure JavaScript. It's not very difficult.
But it's a lot easier if you use jQuery. You have mousemove() function for handeling event; height() and width() functions to calculate button dimmension; offset functions to calculate position of the button and toggleClass() to change the class of the button.