This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 7 years ago.
I'm trying to apply the hover effect to two distinct elements at the same time, which means that when I mouseover one element I was the other element to be with hover effect as well. The two elements are one simple text and one icon (using font awesome). Is there any way to do this with html and css only? Or do I need to use javascript?
Thank you very much!
I think this is what you mean. And if it is, then it is by far the easiest way.
HTML:
<body>
<button class="button">Click Me!</button>
<p class="text">Hello World</p>
</body>
CSS:
.button:hover{ //To change button color
background-color: #436242;
}
.button:hover + .text{ //To change text color
background-color: #436242;
}
So pretty much just add the "+" then the second div.
You could do it with css as alireza told you but you need an strict html code. The easiest way by far is jqueryand quite easy to implement and understand.
With this code:
$('.element').on('hover', function(){
$('.element').toggleClass('hover');
});
You just add the class hover to whatever element with the class element you hover. Then just add css properties to class hover:
.hover {
color:red;
}
JSFIDDLE
Edited: after reading your comment... if you want a different hover effect for each element then as easy as with this html:
<p class="element text">Text</p>
<p class="element icon"></p>
you just toggleClass diferent class for element like:
$('.element').on('hover', function(){
$('.text').toggleClass('hover1');
$('.icon').toggleClass('hover2');
});
NEW JSFIDDLE
To add it to your project don't forget the script tag and on load function (jsfiddle does it automatically):
<script type="text/javascript">
$(document).ready(function () {
$('.element').on('hover', function(){
$('.element').toggleClass('hover');
});
});
</script>
Related
I have the following HTML markup:
<h1>
<div class="sponsor">
<span>Hello</span>
</div>
World
</h1>
When I use the CSS selector h1 I get Hello World.
I can't unfortunately change the markup and I have to use only CSS selectors because I work with the system that aggregates RSS feeds.
Is there any CSS selector which I can take only the text node? Specifically the World in this example?
The current state of CSS can't do this, check this link: W3C
The problem here is that the content you write to the screen doesn't show up in the DOM :P.
Also ::outside doesn't seem to work yet (at least for me in Safari 6.0.3) or it simply doesn't generate the desired result yet.
Check my fiddle and then check the DOM source: JSfiddle
Finally there are attribute selectors a { content: attr(href);}, making CSS able to read DOM-node attributes. There doesn't seem to be a innerHTML equivalent of this yet. It would be great tho if that was possible, whereas you might be able to manipulate the inner markup of a tag.
Bit of a workaround:
h1 {
color: red;
}
h1 * {
color: lime;
}
<h1>
<div class="sponsor">
<span>Hello</span>
</div>
World
</h1>
This is almost the opposite of a question I asked last week: Is it possible to select the very first element within a container that's otherwise pure text without using classes or identifiers in pure CSS?
The short answer is no. "World" in this example isn't an element of its own - therefore there isn't a way to select it.
What you would have to do here is style the h1 then override that styling with div.sponsor. For instance, if you wanted "World" here to have a black background with white text you woud use something similar to:
h1 {
background:black;
color:white;
}
h1 div.sponsor {
background:white;
color:black;
}
Unfortunately, however, this wouldn't work if you were only wanting the word "World" styled and your markup had more than just that within <div>Hello</div> World Foo, for instance.
I don't believe it would be possible with pure CSS to style just "World" in this situation.
I also met same problem, where I can't touch the markup and have no control with js.
I needed to hide a text nodes in a div element, but the element to remain visible.
So here is my solution:
markup:
<div id="settings_signout_and_help">
<a id="ctl00_btnHelpDocs" class="ico icoHelp" href="http://" Help Guide</a>
Signed in as: <a id="ctl00_lUsr" href="Profile.aspx">some</a>
Home
Sign out
</div>
css:
#settings_signout_and_help {
font-size: 1px !important;
}
#settings_signout_and_help a {
font-size: 13px !important;
}
Hope this helps guys!
I had a similar problem where I had to remove the "World" text from html generated by a C# function.
I set the font-size to 0 on the 'h1' element and then applied my css to div class. Basically hiding the extra text, but keeping content in the div.
I don't know how to do it with just CSS, but...
Using JQuery, you could select all the elements inside except the stuff inside its child element
$("h1:not(h1 > div)").css()
and put whatever CSS effect you want inside there.
This question already has answers here:
How to style a checkbox using CSS
(43 answers)
Closed 7 months ago.
I want to make HTML checkboxes have a certain set of CSS styling only when it's been selected. E.g. change colour or change text weight, etc.
I am confused about whether I should use a function or if there is an existing method that I could use.
I have gone through these questions:
css checkbox style for border color
How to change checkbox's border style in CSS?
You don't need any function for this, you can do this with good understanding of css selectors
You can try:
input[type="checkbox"]:checked+span {
text-decoration: line-through;
color:red;
}
and define your text box like
<input type="checkbox" ><span>Some text label for checkbox</span>
Here is an example
You can control the styling of checkboxes or other inputs based on their current state through CSS selectors like this:
input[type='checkbox'] {background-color:red;}
input[type='checkbox']:checked {background-color:blue;}
In JavaScript, use a function that you would call the onclick method on.
Example:
<div>
<p id ="color" onclick="changeFunction()">This text can change colors</p>
<button id="changeColor" onclick="changeFunction()"> Click Me</button>
</div>
<script>
function changeFunction(){
var words = document.getElementById('color');
words.style.color = 'red';
}
</script>
Here's a working Jsfiddle to show you this example: https://jsfiddle.net/z4gr8wn5/
This should give you a base idea of how you should go forward with figuring out what you need to find out.
If you are looking on how to change a checkbox style when the user clicks then this will help you out https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox
Making use of the :checked css pseudo-class you will be able to change the element style without using Javascript.
You can read more about it here.
/* Change color */
input[type="checkbox"]:checked {
box-shadow: 0 0 0 3px red;
}
/* Change label color */
input:checked+label {
color: blue;
}
<input type="checkbox" name="my-checkbox" id="example">
<label for="example">Check me!</label>
It might be that you want to toggle a class, and here is a example if that is the case.
<style>
.mystyle {
font-size: 25px;
}
</style>
<div onClick='this.classList.toggle("mystyle");'>
example1
</div>
or maybe add a class to an object you clicked.
<style>
.mystyle {
font-size: 25px;
}
</style>
<div onClick='this.classList.add("mystyle");'>
example2
</div>
or, if you really want to be in control you can send the clicked object to a function and manipulate it there, in any way you like.
<div onClick='myFn(this);'>
example3
</div>
<script>
function myFn(that) {
that.style.color = "blue";
that.innerHTML = 'You clicked me!';
}
</script>
This question already has answers here:
toggle show/hide div with button?
(8 answers)
Closed 6 years ago.
Using JavaScript, I want a button to show or hide a div by changing the CSS.
HTML:
<div id="bottomContainer">
<div id="count" class="count">...</div>
<div id="visualizations>...</div>
</div>
CSS:
.bottomContainer {
display: block;
}
I want to use javascript to do the following
[button]
When button is clicked Javascript changes the CSS for bottomContainer to the following
.bottomContainer {
display: none;
}
Is this possible?
Yes, a number of ways. With vanilla JS, you would do something like:
document.getElementById('myButtonId').addEventListener('click', function () {
document.getElementById('bottomContainer').style.display = "none";
}
This is just one of a few ways. You could also make a css rule for a .hide class that has the display: none rule, or do this with jQuery's .hide() method, or any number of framework-based means.
This will work if you only want the button to hide the container and not toggle its visibility.
<button onClick="document.getElementById('bottomContainer').style.display = 'none';">Click me</button>
I have read quite a few articles but still couldn't figure out. Tried lots of methods they provided but still no luck.
I have this in my html
Button 1
this is what happens to css when hovered
.btn-success:hover,
.dropdown-toggle.btn-success {
background-color: yellow;
}
I want to change the background color to blue using js.
I'm not sure why you'd need to do this with js when you could just change it in your CSS. But if you must you could just add a class to the element using
$('.btn-success').addClass('hoverClass');
And in your CSS
.hoverClass:hover {
background: green;
}
You can achieve this by changing the class assignment.
First give the link an ID so we can isolate it within the dom.
Button 1
To change the appearance of that link you could change the class to btn btn-primary btn-lg", the default value for 'btn-primary' is blue.
document.getElementById("myButton").className = "btn btn-primary btn-lg";
I did not know why you turn to js as css is the best choice for what you need. I guess you might find the css for the link is somehow "tricky": it needs to written in the order of "lvha", i.e. a:link, a:visited, a:hover and a:active
There are two Javascript events you need, the «onmouseover», that is triggered when the mouse move over the link, and the «onmouseout», that is triggered when the mouse moves aways from the link. I wrote a short example to you.
<html>
<head>
<script type="text/javascript">
function hoverIn ( element )
{
element.style.background = "blue";
}
function hoverOut ( element )
{
element.style.background = "none";
}
</script>
</head>
<body>
Click Me
</body>
I need such a scenario at where if anyone hover on a div, another div will be hovered. Just like:
HTML
<div class="box"></div>
<div class="link-box">
Touch the Grey Box and I get hovered!
</div>
CSS:
.link-box a:hover {
color: red;
}
Foddle Work
If anyone hover on the div.box, div.link-box will get hovered I mean get the red color. Is it possible? Please, don't tell it like this CSS way:
.box:hover .link-box a {
color: red;
}
My scenario is not like this. I've more complex scenario. So, it's only possible with jQuery. As I ain't good at jQuery, I can't write the script. That's why I need your help. What's the jQuery for it? May be, something like this?
$('.box').hover(function(){
$('.link-box').hover();
});
..............................................Update..................................
All the answer is related with CSS. Basically, div.link-box is such a complex div at my webpage that if anyone hover on the div.link-box many action happened, like pop-up box coming, multiple child elements of div.link-boxwill change. All happened with jQuery + CSS. And I need all the hover action of div.link-box when anyone hover on div.box. I just make here div.link-box as a link to make you understand my problem. But, basically it's not just css change. So, is it possible to bring all div.link-box hover action by hover on another div/button/link just like div.box by jQuery ?
As long as they stay in the same layout you can use the adjacent selector (+) in css.
Updated Fiddle
.link-box a:hover, .box:hover + .link-box a{
color: red;
}
The important thing to remember about the adject selector is that the two divs have to have the same parent, and the box has to immediately precede the second div.
More information on the adjacent selector
Edit:
Another option would be to wrap both divs in another div, and use the hover of the wrapper div.
This second option doesn't have the drawbacks of using the adjacent selector. As long as the anchor is anywhere inside of the wrapper, it will be styled when any part of the wrapper is hovered.
FIDDLE
Like so:
<div class='box-wrapper'>
<div class="box"></div>
<div class="link-box"> Touch the Grey Box and I get hovered!
</div>
</div>
with the following style:
.box-wrapper:hover a {
color: red;
}
Create a CSS class called "hover" (to affect you a make it .hover a)
.hover a
{
color: red;
}
Then your JQuery would read:
$('.box').hover(function(){
$(".link-box").toggleClass("hover");
});
Instead of the :hover css selector, I would use classes.
CSS:
.hover{
color:red;
}
JS:
$('.box').hover(
function(){
$('.link-box').addClass('.hover');
},
function(){
$('.link-box').removeClass('hover');
}
);