I have two buttons that i want to replace with chevrons.
(https://fontawesome.com/icons/chevron-right?s=solid&f=classic)
.button { visibility:hidden }
.button:after { visibility:visible; content:'>'; font-size: ~+30px }
That's the way i'd do it.
But i would rather replace the buttons with an image / svg, instead of plain " > " characters.
Any solution?
You can either use background-image for your .button:after or try below approach.
button {
border: none;
background-color: transparent;
}
<button onClick='alert("clicked");'>
<img src="https://cdn0.iconfinder.com/data/icons/merry-christmas-41/512/37-christmas-wreath-decoration-1024.png" width="48"/>
</button>
Related
<a>Link</a>
Can we prevent this element from having any hover effect without usin :hover?
I usually go:
a {
color= white;
}
a:hover {
color= white;
}
I've checked pointer-event= none; but it disabled the entire element and made it text.
You have some syntax error in your CSS, Please update your CSS with following code:
a, a:hover {
color: white;
}
a {
color: white !important;
}
/*
So you can actually see the white link
*/
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
or if you don't want to use :hover you just add !important in your default CSS
a {
color: white !important;
}
Note: for standard practice we don't use !important frequently. So you can add this css inline. You can check updated code below..
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
First of all. Don't use = inside CSS but use : instead.
To disable the hover (animation) do this:
a, a:hover {
color: white;
text-decoration: none;
}
a:hover {
cursor: text;
}
However, if you assign a href attribute the link will still be clickable.
This you cant disable by css but you need javascript or jquery for that.
Example
test
I've built a site with TYPO3 (4.7.2) which has a nice graphical menu on the right hand side (see here). But this is not so user-friendly nor is it easy to maintain, as it is a bit of a hack and doesn't use "Typo3-Standards", but just some general HTML/CSS-hacking:
the menu's html is:
<p id="kat">
<a target="_blank" href="http://www.fusspflege.com/elkat/op/">
<img src="/fileadmin/images/baehr_katalog2.png" />
</a>
</p>
and the corresponding CSS:
#kat a {
background: url("/fileadmin/images/baehr_katalog2_hover.png") no-repeat;
display:block; height:120px; width:220px; /* Linkbereich begrenzen */
}
#kat img {
display:block; width:220px; height:120px; border:0;
}
#kat a:hover img {
visibility: hidden;
}
So basically I show the image with white font in "standard mode" and when the mouse hovers, that image is hidden and the same image (with black font) in the background becomes visible. I thought this was quite nice, and it did not need any JS :-)
But I'm wondering if there is a way to do this more elegant, robust and user-friendly (perhaps with TYPO's tools?), so that the user could change images if needed without having to worry about CSS...
edit: I found a solution requiring one image! (Text is in transparent colour and the CSS has this:
#kat a:hover img {
background-color: black;
}
But still I wonder if there's not a more TYPO-esque solution around? ;-)
If you don't use text links (only image) you are able to switch properties like this:
#kat a {
text-decoration: none;
display: block;
width: 220px;
}
#kat a img {
border: 0;
max-width: 100%;
height: auto;
display: block;
opacity: .5;
}
#kat a:hover img {
opacity: 1;
transition: opacity 1s ease 0s;
}
<p id="kat">
<a target="_blank" href="http://www.fusspflege.com/elkat/op/">
<img src="http://lorempixel.com/440/220"/>
</a>
</p>
As edited in the q, I found a solution:
Text is in transparent colour and the CSS has this:
#kat a:hover img {
background-color: black;
}
(In order to avoid issues created by non-CI fonts and to maintain good looks etc., I prefer captions as part of img vs. CSS-styled text.)
I've been playing around with this, and I thought it would be pretty simple. What I'm trying to do is hover over the 'NEW' label. Once in its hover state, change the content from 'NEW' to 'ADD' using only CSS.
body{
font-family: Arial, Helvetica, sans-serif;
}
.item{
width: 30px;
}
a{
text-decoration:none;
}
.label {
padding: 1px 3px 2px;
font-size: 9.75px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
white-space: nowrap;
background-color: #bfbfbf;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-decoration: none;
}
.label.success {
background-color: #46a546;
}
.item a p.new-label span{
position: relative;
content: 'NEW'
}
.item:hover a p.new-label span{
display: none;
}
.item:hover a p.new-label{
content: 'ADD';
}
<div class="item">
<a href="">
<p class="label success new-label"><span class="align">New</span></p>
</a>
</div>
Here's a JSFiddle to show you what I'm working with.
The CSS content property along with ::after and ::before pseudo-elements have been introduced for this.
.item:hover a p.new-label:after{
content: 'ADD';
}
JSFiddle Demo
This exact example is present on mozilla developers page:
::after
As you can see it even allows you to create tooltips! :) Also, instead of embedding the actual text in your CSS, you may use content: attr(data-descr);, and store it in data-descr="ADD" attribute of your HTML tag (which is nice because you can e.g translate it)
CSS content can only be usef with :after and :before pseudo-elements, so you can try to proceed with something like this:
.item a p.new-label span:after{
position: relative;
content: 'NEW'
}
.item:hover a p.new-label span:after {
content: 'ADD';
}
The CSS :after pseudo-element matches a virtual last child of the
selected element. Typically used to add cosmetic content to an
element, by using the content CSS property. This element is inline by
default.
.label:after{
content:'ADD';
}
.label:hover:after{
content:'NEW';
}
<span class="label"></span>
This little and simple trick I just learnt may help someone trying to avoid :before or :after pseudo elements altogether (for whatever reason) in changing text on hover. You can add both texts in the HTML, but vary the CSS 'display' property based on hover. Assuming the second text 'Add' has a class named 'add-label'; here is a little modification:
span.add-label{
display:none;
}
.item:hover span.align{
display:none;
}
.item:hover span.add-label{
display:block;
}
Here is a demonstration on codepen: https://codepen.io/ifekt/pen/zBaEVJ
I'm trying to make a pure CSS image change on hover / rollover without using background images. So far I have one image and when you rollover that image, another image appears. Here is the CSS:
#hidden {
display: none;
}
#visible:hover + #hidden {
display: block;
}
So, when you rollover the #visible div, the #hidden div appears. Here is the jsFiddle: http://jsfiddle.net/MNyzd/1/
This works great, but it is not exactly what I want to accomplish. I would like the images to swap. So when you rollover #visible, it should disappear instead of remaining visible. My first initial idea was to make the #visible div to display:none on hover (#visible:hover display:none;), but this did not work.
So does anyone have any idea how I would successfully turn this into a traditional image hover / swap using this method? Any help would be appreciated and again, here is the jsFiddle... http://jsfiddle.net/MNyzd/1/
Use a container where you do the hover on:
http://jsfiddle.net/MNyzd/8/
.hidden {
display: none;
}
.container:hover .visible
{
display: none;
}
.container:hover .hidden {
display: block;
}
See also this answer: Hide / show content via CSS:hover (or JS if need be)
Like this?
jsFiddle
div {
cursor:pointer;
overflow:hidden;
width:300px;
}
div > img:nth-child(2), div:hover > img:nth-child(1) {
display:none;
}
div:hover > img:nth-child(2) {
display:block;
}
http://jsfiddle.net/MNyzd/4/
EDIT: The code:
#hidden {
display: none;
position: absolute;
top: 8px;
left: 8px;
}
#visible:hover + #hidden {
display: block;
}
#hidden, #visible {
width:300px;
height:300px;
}
<div id="visible"><img src="http://b.vimeocdn.com/ps/372/159/3721596_300.jpg"></div>
<div id="hidden"><img src="http://yuccan.com/wp-content/uploads/2013/04/cool-eez-spaced2.png"></div>
I understand the basics of CSS.In fragments.
I try to understand how to combine all of what I want together.
I want to create two types of buttons, "view" and "save".
I have 4 images, two for each, where one represents the button, and one when mouse hovers it.
So I want an alternative background when hover.
I want also a tooltip, something "cheap" like "View file", "Save file", that better explains the content of the image if it wasn't clear enough.
I understand that I need to use the hover attribute, background attribute, and somehow to create a tooltip.
Those two buttons are actually images with a link
How do I combine it all together?
you could do something like this:
<div title="View File" class="view-button">
View File
</div>
CSS:
.view-button {
background-image: url("first-view-image");
}
.view-button:hover {
background-image: url("second-view-image");
}
And the same for the save button. The title tag shows a small tooltip. if you want bigger/fancier tooltips, you have to use some javaScript framework.
check this out
HTML
<button>Hello</button>
CSS
button {
background: url(your-image.png) no-repeat;
}
button:hover {
background: url(your-image-hovered.png) no-repeat;
}
button:focus {
background: url(your-image-focused.png) no-repeat;
}
Hi i've created a fiddle for you. When you hover the image/button changes and also you get a small tooltip that says "Click here to Save". Is that all you need? Tell me if this helped you or you have any questions.
EXAMPLE
HTML
CSS
.save {
margin-bottom: 10px;
width: 47px;
height:20px;
display:block;
background:transparent url('http://www.mtsworld.com/images/button_submit.gif') center top no-repeat;
}
.save:hover {
background-image: url('http://www.ecdoe.gov.za/ecdoe/graphics/buttons/submit.png');
}
This is my example, change background value to your image, to use tooltip i used jqueryui
Example
html
<a href='#' class='button savebutton' title='Save form'>Save</a>
<a href='#' class='button cancelbutton' title='Cancel action'>Cancel</a>
css
.button{
background : #999;
padding : 5px 10px;
border-radius : 5px;
color:#fff;
text-decoration : none;
}
.savebutton{
background : blue;
}
.cancelbutton{
background : orange;
}
.savebutton:hover{
background : cyan;
}
.cancelbutton:hover{
background : yellow;
}
.ui-tooltip {
padding: 8px;
position: absolute;
z-index: 9999;
max-width: 300px;
-webkit-box-shadow: 0 0 5px #aaa;
box-shadow: 0 0 5px #aaa;
}
body .ui-tooltip {
border-width: 2px;
}
JS
$('.button').tooltip();