This question already has an answer here:
Change Button Font Color on Hover With "Hover color" declared on each button tag not in CSS
(1 answer)
Closed 4 years ago.
I want to add color to the text. I have more texts. So I retrieve the text color from the server and added the text color to the corresponding text. I want to add the border for the text and need to assign corresponding text color for the border when hovering the text.
In style sheet, we can able to give hover like below:
.text: hover{
color:#FF0000;
}
But I have dynamic text color. I want to assign corresponding text color for the border for the corresponding text. In the style sheet, we cannot do.
Is there any way to add hover in style attribute in div?
You're giving the space before hover and after the colon(:), you have to write like this.
.text:hover {
color:#FF0000;
}
Hi you may achieve this using Jquery in my snippet I used common variable for color and utilised it please have a look.
Get hover event and add styles and remove styles dynamically
var color = "red";
$(".mycontent").hover(
function () {
$(this).css({
"color": color,
"border":" 1px solid "+color
})
},
function () {
$(this).css({
"color": "inherit",
"border":"inherit"
})
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mycontent"> inner content</div>
I hope this is helpful
div:hover .text:nth-child(odd) {
background: red;
}
div:hover .text:nth-child(even) {
background: blue;
}
Related
I am trying to create a button with text inside. I want it so that when you hover over the box, the color of the box changes to white, and the colour of the text changes to blue.
How can I add css to make my text and box change colors on hover?
Edited: I got the html snippet for that from another part of the website template I am editing. It is basically a box that does exactly what I have outline above. I then placed it inside the list tag of the menu html, hoping that it will just transfer the functionality but it didn't work. So I tried to add the [hover:] but it still isn't working.
I know I am doing something wrong but I don't know enough to know what it is.
Code snippet is for html:
Upload resources
Use the :hover pseudo selector
e.g.
button {
color: white;
background: blue;
}
button:hover {
color: blue;
background: white;
}
Of course, replace with the actual hex codes you need rather than the colour names above, and any valid property can be used, e.g. border, text-decoration etc.
Use :hover pseudo selector
element{
color: white;
background: blue;
}
element:hover{
color: blue;
background: white;
}
You can check these at Click Here
I have a react js application witch contains a select with a dropdown. I want to apply styles for 2 states: when the mouse hover the dropdown item and when the dropdown item is focused.
.select__option.select__option--is-focused {
background: blue;
}
.select__option:hover {
background: gray;
}
Both styles work. If the user will navigate within dropdown with keyboard arrow (up/down) the will be applied blue color on the item, if he will hover the item will be applied gray color as background. ISSUE: When user hover the focused item which has blue background, the hover color overrides the blue, but i want to not override blue color even the hover is applied over focused element, so the focused element should keep everytime its color. How to fix that? https://codesandbox.io/s/codesandboxer-example-forked-y4zs8?file=/example.tsx:0-505
Just switch elements in place (so that later overwrites previous) or make .select__option.select__option--is-focused:hover{background: blue} as rule too
.select__option:hover {
background: gray;
}
.select__option.select__option--is-focused {
background: blue;
}
<div class="select__option">
.select__option
</div>
<div class="select__option select__option--is-focused">
.select__option.select__option--is-focused
</div>
If nothing else helps, then just write a rule that does explicitly apply blue background color when both conditions are met - the element has those class names, and is hovered. You can combine both into one single rule, by simply listing both selector expressions comma separated.
.select__option.select__option--is-focused,
.select__option.select__option--is-focused:hover {
background: blue;
}
Try the not() pseudo class:
.select__option:not(.select__option--is-selected):hover {
background: gray;
}
My bad, i gave the wrong class in the not(). updated it
This question already has answers here:
How to keep :active css style after click a button
(3 answers)
Closed 3 years ago.
My application has several buttons (say b1,b2,b3) which I am using as navigation menu items (alternate to using <a>). I want to change the color of the button when it is clicked/selected. When a particular button is clicked (say b1), its color should change to say red and all b2,b3 should have color grey. When b2 is selected, it should be red and b1 should switch back to grey. Is there a way I can do so using css and pseudo elements (something similar to :hover)?
A good strategy is to have a class isClicked which have the styles of the clicked element, and toggle everytime the element is clicked,say:
I use jquery to show the logic behind it :D
$('div').click(function(){
$('div.isClicked').toggleClass('isClicked')
$(this).toggleClass('isClicked')
})
div {
width: 100px;
margin:10px auto;
cursor: pointer;
text-align:center;
background-color:grey;
}
div.isClicked {
background-color:red !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>A</div>
<div>B</div>
<div>C</div>
i have many link in my content
how can found and change color all link in div tag when show content to user ?
like that :
pleas visit my own site's : telegram.org , www.google.com , www.wikipedia.com , ...
and send mail to : mymail#gmail.com
If you want to style a link you should use css to do this:
.new_link {
background-color: black;
color: white;
}
<div>
<a class="new_link" href="#link2" id="link1">Go to next link</a>
<br>
<a class="new_link" href="#link1" id="link2">Go to link1</a>
Some other text that will not be styled
</div>
Here i added a class in the link elements (<a> element).
By adding a class they get the css styling.
The styling i choose here where:
Background-color
color (text-color)
You can make create css rules (like above) for all <a> elements on your page.
An other possibility is to add a class to the <div> element and select all links inside this div. All of this is possible with css.
if you want to change the color of links in all pages or app then do this in css..
a {
color: red;/*color name, color code or rbg*/
}
if you want to change the specific link color ....
a.highlight {
color: red;
}
if you want to change the all links color in specific div .....
.content a{
color:red;
}
i want that when i move my mouse on menu. it will change background colour as well as it will change text colour.
but my CSS only change background colour, it will not change text colour.
need help please.
a:hover
{
color: #231f20; //for text new colour (not worked)
background-color: #ffffff; //for background new colour (it worked)
}
I think I understand what you mean, the only reason why I don't think it worked was the way you tried to comment out the code, you were using // instead of /*.
Here's what I replaced it with:
a:hover
{
color: #231f20; /*for text new colour (not worked)*/
background-color: #088a68; /*for background new colour (it worked)*/
}
Small Example
<br>
Big Example
Live example: https://jsfiddle.net/yn16bxsv/
Hope this helped