I have a bootstrap link button, but it is really just for show as the reason for it is that I wanted an element that I can label with an id.
When I hover over the button though, the cursor changes to a clickable cursor and the button text content gets highlighted also.
Of course clicking on the button will not do anything. However, I do not want the cursor change and the highlight.
Is there a way to achieve this?
By default the style property for cursor is set to pointer on hover.
Lets say your button id was fake-button (use a "." instead of a "#" if you want it to be a class), this is the style you would need:
#fake-button:hover{
text-decoration: none;
cursor: initial;
background-color: initial;
}
I can only make assumptions and general suggestions without seeing any of your code.
Add a new class to the button and then add it to the CSS with declaration cursor: default to make the cursor default and you have to reset the background color:
HTML:
<button class="button button-reset-stuff"></button>
CSS:
.button-reset-stuff:hover {
cursor: default;
background: red; /* red being the default color of the button, which I don't know without a sample of your code */
}
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'm trying to code a website and every time I edit the images there's a mouseover effect and I want to have a plain image on the webpage. The image is grayed out and when I mouseover it's not. How can I make it stay normal without having to mouseover? When I click, it opens a link and just opens the same page. SOS.<img src="images/image.jpg" alt="image" class="border2" />
If you have CSS stylesheets they may be causing the difference, use inspect element on it and see what styles are active and click on the :hov then the :hover button next to the filter bar in the styles tab to see how it changes. Then look at the style side with hover activated and see where, if any, there are places with :hover in their selector. Next find the place in your stylesheet where that selector is and copy its contents into the selector without :hover
Example
<button class="btn">Press Me</button>
which would then be styled by both:
.btn {
background-color: white;
}
.btn:hover {
background-color: blue;
}
this would mean that when not hovered the button is white but then becomes blue when you hover over it. A similar thing may be happening to your image with something along the lines of:
.border2 {
background:#ffffff;
opacity: 0.5;
}
.border2:hover {
opacity: 1;
}
found this on Grey out all images other than active hover image
My anchor even after applying CSS styles to it when it's disabled still acts like hyperlink. Changes colour when hovered on.
I've spent some time on this already and almost giving up on this one. I want the magnifying glass to not change colour at all after hovering over it.
This is the anchor
<a href="" class="postcode-search-icon clickable"
ng-click="searchPostcode()" ng-disabled="true" title="Search Postcode">
</a href="">
And my current CSS styles attempt to fix it
.postcode-search-icon[disabled], .postcode-search-icon[disabled]:hover {
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}
What am I doing wrong?
In case you're wondering clickable class is just this so it doesn't matter
.clickable {
cursor: pointer;
}
#edit
Looks like applying color: (original colour) makes a temporary workaround until I find something better.
It seems like your css selector is wrong. The disabled pseudo class only works with input fields and not with anchors.
input[disabled="disabled"], input.disabled {
/* whatever you want */
}
Besides that, idk how you handle the addition of the clickable class, you need to handle that in order to not override styles.
If you are using Angular, you should be able to use a conditional class with the ngClass attribute. Not sure if you are using Angular 2, 3, 4, 5, or JS (here's the JS link for ng-class).
I think I would make the clickable item into a button, as well.
.bright:hover {
color: #0066ff;
cursor: pointer;
}
.dim:hover {
color: #ccc;
cursor: default;
}
<button ng-class="{bright: enabled, dim: disabled}"><i class="search-icon"></i> Search</button>
I have made animated on hover divs but as soon as I attached hyperlinks to them purple outlines appeared. Codepen: https://codepen.io/forTheLoveOfCode/pen/yPEygM
The way I am attaching hyperlinks to divs at the moment is as follows:
<a href="https://www.freecodecamp.org/misskatiapunter">
<div class="communities-link" id="free-code-camp-butn">
<i class="fa fa-free-code-camp ffc-text"></i>
</div>
</a>
What would be the best way to overwrite all hyperlink styles so that the only effect hyperlink has on a div is - to link it to another page.
What you're looking for is to set the color property on the a tag, and you'll probably also want to set the text-decoration property to none:
a {
color: inherit;
text-decoration: none;
}
color: inherit states that the element should inherit the colour from the parent element, if defined. If a parental colour is not defined, it will inherit a black colour from <body>.
color: inherit is the most commonly-desired usage, allowing you to change the colour, but if you need to override this for specific links you can use color: initial, which will set it back to its default value of blue:
a {
color: inherit; /* Becomes black */
}
a.blue {
color: initial; /* Becomes blue, overriding the inheritance from a */
}
text-decoration: none removes the underline from 'regular' hyperlinks. It won't have any effect in your specific use-case, but is useful if you want to remove the underline entirely.
I've created an updated pen showcasing this here.
Hope this helps! :)
If you ever want to remove default styles, do it the same way that you would if you were to add the style. for instance: if the link has a purple outline, add a a {border: 0;} property, or if it appears whenever you hover it, do a:hover{border: 0;}, or if it shows when its clicked do a:active{border: 0;}
I know that press signal in css is :active, but i still can't find a proper way to make a toggle switch for the link.
For example, <a> has the color blue, when <a> will be pressed first time, it's color should be red, when it is pressed second time, it's color should blue again. So basically first press is a toggle switch from blue to red, and second is vice versa.
I have used :target action which didn't seem to work out:
a {
color: blue;
}
a:active {
color: red;
}
a:target {
color: red;
}
How could this be possible without use of JS? So i could toggle switch the link color to red on the first click, and then blue again at the second.
You can do it via checkboxes and labels.
HTML:
<input type="checkbox" id="t1" class="toggle">
<label for="t1">Link with toggling color</label>
CSS:
.toggle {
position: absolute;
left: -99em;
}
.toggle:not(:checked) + a {
color: blue;
}
.toggle:checked + a {
color: red;
}
Working example here.
This is not possible to achieve without JS. Links are not designed to be toggle elements, and CSS has nothing to track multiple clicks on an element (it is either being clicked or is not).
If you want to represent a toggle, then look at checkbox inputs instead. They have a :checked pseudo-class.
There is one way you could (sort of) achieve this purely with CSS but it would mean that, in its initial state the link would actually be unclickable, which probably wouldn't be desirable.
The trick is to set the pointer-events of the anchor tag to none, wrap it in another element with a tabindex attribute (to allow it to gain focus) and then, when the wrapping element receives focus, change the colour of the anchor and reset its pointer-events. On the next click, the link will receive focus but this will remove the focus from the wrapping element, which will revert the anchor's styles back to their initial state.
*{color:#000;font-family:sans-serif;outline:0;}
a{
color:#00f;
pointer-events:none;
}
span:focus>a{
color:#f00;
pointer-events:initial;
}
<span tabindex="-1">link</span>