After clicking on either right or left in this carousel, the button remains darker, even after you mouse off the elelemnt. I assume the reason is some sort of visited state, but looking at the CSS, I don't see anything relevant. Is there any way to prevent that effect?
I've written a JSFiddle to demonstrate it, and copied the HTML below.
<div class='container'>
<div class='row'>
<div class='carousel slide' data-interval='false' id='product-image-carousel'>
<!-- Wrapper for slides -->
<center class='carousel-inner'>
<div class='active item'>
<img alt='...' src='http://placehold.it/300x200'>
</div>
<div class='item'>
<img alt='...' src='http://placehold.it/300x200'>
</div>
</center>
<!-- Controls -->
<a class='left carousel-control' data-slide='prev' href='#product-image-carousel' role='button'>
<span class='glyphicon glyphicon-chevron-left'></span>
</a>
<a class='right carousel-control' data-slide='next' href='#product-image-carousel' role='button'>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
</div>
<!-- Carousel -->
</div>
</div>
Quick workaround: Overwrite bootstrap's css.
.carousel-control:hover,
.carousel-control:focus {
color: #fff;
text-decoration: none;
opacity: .9;
filter: alpha(opacity=90);
}
Remove completely the :focus selector
You can use this workaround:
$(".carousel-control").focus(function(event){
$(this).blur();
});
It works for me.
Simply fix this with css , Decrease the opacity to this .carousel-control:hover, .carousel-control:focus classess , apply the below code your fiddle or your page you can see the difference , Thanks
#product-image-carousel a {
outline: none !important; /* this will remove the outline when we click the anchor tag */
}
.carousel-control:hover, .carousel-control:focus {
opacity: 0.5; /* this will remove the darker color on focus and hover */
}
jsfiddle Update
.carousel-control:focus {
outline: none;
opacity: 0.5;
}
.carousel-control:hover {
opacity: 0.8;
}
Related
a:hover
{
text-decoration: none;
color: #F78888;
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<nav class="w3-sidebar w3-collapse w3-top w3-large" style="z-index:100;width:210px;font-weight:bold;" id="mynav">
<div class="w3-container" style="color: white;">
<h3 class="w3-padding-64"><b>No<br>Name</b></h3>
</div>
<div class="w3-bar-block w3-padding-8" style="color: white;">
Courses
Exercises
Rubric
Students
AnyName
Contact
Logout
</div>
</nav>
I am using w3-CSS for my web page. While I apply the hover effect for the 'a' elements it is applying. I can't overwrite the predefined hover effect of the w3-css. I want to change thee text color while hovering the mouse.
That stylesheet you're using is littered with !important declarations including this one at line 144:
.w3-button:hover{color:#000!important;background-color:#ccc!important}
If you want to use a custom color you're unfortunately going to have to declare it the same way using !important. I never advise this if I can help it but, that stylesheet is garbage, so I'm afraid you're not left many choices.
Below is a sample showing this. (I had to add a few other non-relevant styles to get the markup to display in the snipped because nav was display:none. You can ignore those.
/* For demo only */
body {
background-color: #ddd;
}
nav.w3-sidebar.w3-top {
display:block;
background-color: #ccc;
}
/* override !important declarations from W3 stylesheet */
a.w3-button:hover {
color:red !important;
background-color:#ccc !important
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<nav class="w3-sidebar w3-collapse w3-top w3-large" style="z-index:100;width:210px;font-weight:bold;" id="mynav">
<div class="w3-container" style="color: white;">
<h3 class="w3-padding-64"><b>No<br>Name</b></h3>
</div>
<div class="w3-bar-block w3-padding-8" style="color: white;">
Courses
Exercises
Rubric
Students
AnyName
Contact
Logout
</div>
</nav>
Make a new class in your stylesheet, e.g:
.myCustomHoverColor:hover {
color: #78cc45 !important;
}
and add it as a class to your <a> element.
so your <a> would look like this:
Courses´
This worked for me:
<head>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<style>
.myCustomHoverColor:hover {
color: #78cc45 !important;
}
</style>
</head>
<body>
<nav class="w3-sidebar w3-collapse w3-top w3-large" style="background-color: gray; z-index:100;width:210px;font-weight:bold;" id="mynav">
<div class="w3-container" style="color: white;">
<h3 class="w3-padding-64"><b>No<br>Name</b></h3>
</div>
<div class="w3-bar-block w3-padding-8" style="color: white;">
Courses
Exercises
Rubric
Students
AnyName
Contact
Logout
</div>
</nav>
</body>
.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
Courses
By removing the .w3-hover-white from the a element and gave my own userdefined style.
a:hover
{
text-decoration: none;
background-color: white;
color: #F78888;
}
I need to create an icon that shows a div (menu) after a click on it.
Is it possible with CSS3?
This is for the mobile version and I don't need the :hover solution.
PS: If the only solution is doing it with Javascript a link to something would be good too.
CSS
.nav{
color: black;
background-color:white;
height: 5vh;
width: 100vw;
}
.menu{
color: black;
background-color:green;
height: 90vh;
width: 90vw;
}
HTML
<div class="nav">
<!-- Font Awesome Icon -->
<i class="fa fa-bars"></i>
</div>
Theres a few different ways to do this, none of them are foolproof I believe, here's an example using the :focus method. http://fiddle.jshell.net/rpwe4kzy/4/
CSS
.hide{display: none;}
button:focus ~ .hide{ display: block;}
HTML
<div>
<button tabindex="0">Show text</button>
<p class="hide">Hidden type</p>
</div>
See here for more solutions, https://tympanus.net/codrops/2012/12/17/css-click-events/
Otherwise if you want to use JS I suggest utilising a simple jquery function. I'm guessing you have jquery in your project already otherwise just substitute it for a vanilla javascript function.
CSS
<style>
.hidden{ display: none;}
</style>
HTML
<div>
<button class="click-me">Click me</button>
<p class="show-me hidden">
Here is some text!
</p>
</div>
JavaScript
<script>
$( document ).ready(function() {
$('.click-me').on('click', function(){
$('.show-me').show();
});
});
</script>
Here's a working example of the jQuery way, https://jsfiddle.net/clintongreen/bu22op77/
I am trying to make the "alt" text of the brand-logo and brand-logo-collapsed link white instead of the default blue like all the other ones. But am unable to figure out the proper css to specifically call that portion. Will someone please guide me in the correct direction.
<a href="#/" class="navbar-brand">
<div class="brand-logo">
<img src="#" alt="Dealer Tracking" class="img-responsive">
</div>
<div class="brand-logo-collapsed">
<img src="#" alt="Dealer Tracking" class="img-responsive">
</div>
</a>
CSS
a > navbar-brand > img {
color: #fff;
}
Your element with navbar-brand class is the same element as the anchor, so need to be treated as such in the CSS (be removing the space in between). Also classnames should be prepended with a ., and as you have a div in between the image and the anchor, it will break the rule, as > only selected direct descendants, so get rid of that:
a.navbar-brand img {
color: #fff;
}
Should get it working.
You can do this:
.brand-logo > img, .brand-logo-collapsed img{
color: white;
}
And if you want to to this for all of your images:
img{
color: white;
}
<article class="tweet-inner">
<div class="text-wrapper">
<div class="tweet">
<div class="text">
<p>Coming down! Time for Croation BBQ </p>
</div>
<p class="last">
<span class="pull-right">
<small> Hello this is first text </small>
<small> Hello this is second text </small>
</span>
</p>
</div>
</div>
</article>
I have the following repeating html structure.
As of now, I want to provide alternate rows with different background. The element which I want to color is class=text
I do the following in my css -
.tweet-inner .tweet .text-wrapper .text:nth-child(even) {
background-color: #FF0000;
}
This does not work, I also tried -
.text:nth-child(even) {
background-color: #FF0000;
}
This is what works -
article.text:nth-child(even) {
background-color: #FF0000;
}
But I want the .text to be alternately colored, not the entire article.
This also does not work.
The fiddle is http://jsfiddle.net/LKqvz/. Please let me know.
It should be:
article:nth-child(even) .text{
...
}
Because you have multiple article elements with a single .text DIV (your attempts select the nth .text child from article)
Try this
article:nth-child(even) .text {
background-color: red;
}
Js Fiddle
try this:
article:nth-child(even) .tweet .text {
background-color: #FF0000;
}
I have an icon that I display on top, right of a div on hovering over the div. My code is like this:
<div class='edit_hover_class'>
<!-- some code -->
</div>
And the corresponding css file contains:
.edit_hover_class:hover {
background: url("trash.gif") no-repeat scroll right top;
}
I want to attach a link to the edit icon, is it possible with plain css? If so, how?
You could hide a link until hover like so:
<div class='edit_hover_class'>
<a href='#'><img src='icons/trash.gif' /></a>
</div>
.edit_hover_class a{
visibility:hidden;
}
.edit_hover_class:hover a {
visibility:visible;
}
See jsfiddle:
http://jsfiddle.net/Auzm5/
Or if you only want the icon to link, use CSS visibility:
http://jsfiddle.net/Auzm5/1/
I havent tested this but its worth a try:
HTML
<div class='edit_hover_class'>
<a href='#'><img src='icons/trash.gif' /></a>
</div>
CSS
.edit_hover_class a {
pointer-events: none;
cursor: default;
}
.edit_hover_class a:hover {
pointer-events: auto;
cursor: pointer;
}