I have a fontawesome icon with an onclick to act as a button. Everything works properly, but when I hover over the icon, my mouse doesn't change from a pointer into the finger.
How can I achieve this behavior?
This is the simple icon implementation:
<FontAwesomeIcon
className='text-white'
icon={faChevron}
onClick={this.next}
size='lg'
/>
In general, you can use CSS to change the mouse cursor like this:
.text-white {
cursor: pointer;
}
There are many other variants, see this MDN article: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
try
.text-white:hover {
cursor:pointer
}
Related
I'm using Vuetify's v-btn button component with a variety of colors set via the color prop. Once a user clicks the button, I set disabled to true so they can't click it again, but the button loses its color and gets greyed out.
Is there any way to disable the button without changing its color to grey?
Instead of disabled prop you could use your custom class with pointer-events: none, e.g.
.disable-events {
pointer-events: none
}
<v-btn :class="{'disable-events': customCondition}">
Then add additional styling to that class if needed.
I do it by removing v-btn--disabled and playing with vuetify's css classes.
Still grey but with colored text solution
The button will still be grey, but text will be colored, like that you have a visual effect showing that the button is disabled but still have a colored part.
I, personally, also had some custom opacity to disabled buttons.
HTML
<v-btn id="btnA" :disabled="true" color="success">Success</v-btn>
CSS
button.v-btn[disabled] {
opacity: 0.6;
}
JS
created(){
// Trick to remove class after initialising form
this.$nextTick(() => {
document.getElementById('btnA').classList.remove('v-btn--disabled')
})
}
CodePen
Same display solution
If you really want, the same display you will have to remove [color]--text and add [color] class (and sometimes add white--text class for readability).
JS
created(){
// Trick to remove class after initialising form
this.$nextTick(() => {
document.getElementById('btnA').classList.remove('v-btn--disabled')
document.getElementById('btnA').classList.remove('success--text')
document.getElementById('btnA').classList.add('success')
})
}
CodePen
As Vuetify allready use important! in .v-btn--disabled it's not possible to just override this class. But with the use of a higher level selector like id (example: #custom-disabled which selects id="custom-disabled") you can. This doesen't keep the original colors but you are at least able to override the class to your liking.
<v-btn :disabled="true" id="custom-disabled">
Button
</v-btn>
<style>
#custom-disabled.v-btn--disabled {
background-color: red !important;
}
</style>
For light and dark theme:
<style>
#custom-disabled.v-btn--disabled.theme--light {
background-color: red !important;
}
#custom-disabled.v-btn--disabled.theme--dark {
background-color: brown !important;
}
</style>
Okay so you can do it by disabling the pointer events as mentioned in other comments but if someone is using a keyboard they can still tab to the control and if you are writing automated tests the button can still be clicked.
You can manually override the style and change the disabled button colour in the css however this will potentially be a problem if you are manually setting the color through the color="" property on v-btn based off a theme (because your application supports branding for different clients for example) because Vuetify doesn't just override the color, it stops adding the color altogether.
So my solution was to simply set the button color via a style attribute and set the important flag (to override the disabled important flag) note that you will need to change the text color as well.
<v-btn
:style="{
color: `${getTxtColor()} !important`,
backgroundColor: `${getBtnColor()} !important`
}"
:disabled="status"
#click="doSomething"
>
Click Here
</v-btn>
This approach should play nice with testing, themeing, and will not allow users to tab to the button accidentally.
I've got to create our own buttons using Bootstrap's btn class. I need to override default colors for the button text in particular. I know about .button-variant but I cannot use it (the corresponding LESS file is not included in project build and I can't make such changes). Here is my LESS:
.some-company-control(#text-color, #hover-text-color) {
color: #text-color;
&:hover,
&:active {
color: #hover-text-color;
}
}
The problem is after a button is clicked it gets the default Bootstrap button text color. When I add &:focus it overrides Bootstrap's defaults but after it is clicked and not hovered it still remains as if it is clicked. I would like to disable the styling when a button is still focused but not hovered anymore.
Thanks everyone for any suggestions!
Try to add this rule:
&:focus:not(:hover) {
color: #text-color;
}
Please find the code here
I toggle a class min upon button click. To show this the color is toggled. Is there a way to add an icon to the button, which toggles for example between: icon-double-angle-right and icon-double-angle-left. I linked Font-Awesome CDN. I only care about recent browser, so mainly looking for pseudo elements based sol.
You can achieve this with pseudo attributes :
CSS :
btn.min { background:red; }
.btn:after {
content: attr(data-active-icon);
font-family: 'FontAwesome';
}
.btn.min:after {
content: attr(data-inactive-icon);
font-family: 'FontAwesome';
}
HTML :
<button class="btn" ng-class="{min: min}" ng-click="toggle()" data-active-icon='' data-inactive-icon=''></button>
Where your data-active-icon and data-inactive-icon is taken from this table.
Demo : http://jsbin.com/ariwij/1/edit
I haven't included bootstrap in the demo, but it will integrate just fine.
Make your HTML like this: <button class="btn" ng-class="{min: min}" ng-click="toggle()"><span class="arrow-left"></span></button>
Then use javascript or jquery to replace the class on the <span> with a different class on toggle. Then make your two CSS class rules, one with background image for your left facing arrow, one for your right facing arrow, or whatever the stylistic thing it is you want to achieve.
consider that your button is #butt:
$("#butt").click(function(){
$(this).toggle('red');
})
and CSS:
.red{
color:red;
}
To toggle an icon via class, have a look here:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_like_dislike
I have the following HTML:
<ul id='x'>
<li>
<a class="document-web1" data-href="/x">x</a>
</li>
<li>
<a class="document-web2" data-href="/y">y</a>
</li>
</ul>
I set up this event:
$("#content-button-panel")
.on('click', 'a', function (event) {
event.preventDefault();
var $link = $(this);
getContentAjax($link);
});
This works but when my cursor moves over the text it changes
to a vertical text select bar instead of a pointer. Is there
some way that I can make the cursor always appear as an
arrow when it's over any part of the li element?
If you just want to change the cursor you can use this in your CSS:
li
{
cursor: default;
/*cursor: pointer;*/
}
Plus if you’re not really sure which property render which cursor, check the following link it will clear your confusion.
CSS Cursors
after read your title its looks like you want
li:hover{
cursor:pointer;
}
the above will make cursor like
but after reading your whole question
li:hover{
cursor:default;
}
and this will will show cursor like
also check this its pretty cool with live view
now i would suggest you to write relevant title
I am a little new to jquery myself, but I believe you have to use onhover or onmouseover rather than on click.
You can use the cursor property of css, that is css(cursor, pointer), for example
The css property you want is pointer. setting it to the default value will force the browser to render the pointer as an arrow even though there is no href attribute on the a element.
#x a {
cursor:default;
}
I've made a button that expands horizontally: http://jsfiddle.net/timkl/TsDud/
However I'm having a hard time getting my button's hover-state to work properly.
This is my markup:
<a class="action-button" href="#"><span>Some text</span></a>
I don't know how to style the hover-effect so that the entire button is "lit" when the user hovers over a part of the button that isn't covered by the <span>.
This is what I get when I hover over a part of the button that isn't covered by the <span>:
Check out my example here: http://jsfiddle.net/timkl/TsDud/
jsFiddle DEMO HERE
Change the last lines to:
a.action-button:hover > span
Ex:
a.action-button:hover > span{
background: transparent url(http://dl.getdropbox.com/u/228089/action-button-left-hover.png) no-repeat;
color: white;
}
And as I said in the comment above try to avoid to use separate images for your button states.
Use only one image and for ex. on hover just 'change' the background-position to the part of image representing the state you want!
It will save you the "button disappearance" until the new image is loaded.
You could change the hover rule to only be for a.action-button At present you have the style rule for both a.action-button and its span.
a.action-button:hover { ...
and
a.action-button span:hover { ....
Instead try applying it this way:
a.action-button:hover { ...
and
a.action-button:hover span { ...
won't work on some older version of IE however.
http://jsfiddle.net/HZpDL/