If I have a button with an image inside of it how can I activate the image hover when the cursor is hovered over the button but not the image itself?
This is what I have so far:
<button type="button" class="btn btn-normal"><img src="images/contents/123.png"onmouseover="this.src='images/contents/123-hover.png'" onmouseout="this.src='images/contents/123.png'" class="image" /></div>
css:
.btn-normal {
background-color: #eee;
padding: 15px!important;
width: 250px;
margin-bottom:20px;
}
.btn-normal:hover {
background-color: #ddd;
}
.image {
background-color: #ccc;
}
.image:hover {
background-color: #009fe3;
}
Really at a loss with this - any help is appreciated!
try this
HTML file
<html>
<body>
<script type="text/javascript">
function mouseoverImage()
{
document.getElementById('img').src='images/contents/123-hover.png';
}
function mouseoutImage()
{
document.getElementById('img').src='images/contents/123.png';
}
</script>
<button class="btn btn-normal" onmouseover="mouseoverImage()" onmouseout="mouseoutImage()"><img id="img" class="image" src="images/contents/123.png"/></div>
Think I've figured it out with css... I'm thinking background-image: on the button should work. Hopefully!...
As suggested by #Henrik in the comments above, .btn:hover .image selector should work for you. I have created a simple fiddle with your code. I have added a border style to the image element on hover of btn. And it works.
.btn:hover .image{border:1px solid red;}
Related
I have tried for hours to get this to work trying multiple solved stack solutions and none have worked.
I am assuming I am either missing something or I have my divs/spans incorrect. Any help would be greatly appreciated. Currently my text is very small and bg color is grey and slightly transparent.
Also if it is possible to make the "info" icon smaller that would be great as well. Thank you!
.mainContainer {
width: 40%;
float: left;
}
.info {
display: flex;
}
.info .span {
align-self: center;
}
.info-button{
padding: 0;
border: none;
background: none;
outline: none;
background-color: transparent;
top:-10px;
}
<div class="mainContainer">
<h3>Main Title</h3>
<div class="info">
<h5>Title</h5><span class="info-span">
<button mat-icon-button class="info-button" #tooltip="matTooltip" matTooltip="Tooltip Text">
<mat-icon color="basic" >info</mat-icon>
</button>
</span>
</div>
</div>
Try this
::ng-deep .mat-tooltip {
background-color: transparent;
font-size: 12px;
}
You can set !important if not working.
Hope useful
You can use popper js to integrate and style tooltips it's easy and simple :
this is a quick exemple from the documentation :
<!DOCTYPE html>
<title>Popper example</title>
<style>
#tooltip {
background-color: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 13px;
}
</style>
<button id="button" aria-describedby="tooltip">I'm a button</button>
<div id="tooltip" role="tooltip">I'm a tooltip</div>
<script src="https://unpkg.com/#popperjs/core#2"></script>
<script>
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
// Pass the button, the tooltip, and some options, and Popper will do the
// magic positioning for you:
Popper.createPopper(button, tooltip, {
placement: 'right',
});
</script>
or visit the official website to learn about popper js :Tutorial
I am working with a template. The client is wanting the three buttons different colors. All three are controlled by the same class. I can change the background color to be different if I inspect the page and I can insert it in the element style. How can I make this change permanent in the CSS?
This is the current buttons:
This is how the client would like the buttons:
The CSS controlling this is:
.full-width .generic .third p a {
background-color: #543D91;
border-bottom: 1px solid #fff;
color: #fff;
display: block;
float: left;
padding: 10px 0;
width: 100%;
border-radius: 99em;
}
How can I change this so that each button is a different color? Is this even possible? It has to be done in CSS. I can not use JavaScript/jQuery or anything like it. It has to work in a JSFiddle in only the CSS and HTML. Note that the HTML is created only the label for each button. I cannot make the hyperlink have a style.
If this is not possible can you please give me the codes that I can have 3 images centered with buttons in a container that is 900px with padding between? I appreciate everyones help!
You could use 2 classes and create a CSS like:
.cls {
color: #FFF;
padding: 10px 0;
width: 30%;
}
.c1 {
background-color: #F00;
}
.c2 {
background-color: #0F0;
}
.c3 {
background-color: #00F;
}
<button class="cls c1">Button1</button>
<button class="cls c2">Button2</button>
<button class="cls c3">Button3</button>
I have tried to solve your question using jQuery, try and have a look, it's simple and works like magic:
This is the dummy HTML:
<div id="searchable">
<a>
Something
</a>
<button>
Something
</button>
<a>
Something2
</a>
<button>
Something2
</button>
<a>
Something3
</a>
<button>
Something3
</button>
</div>
This is the required jQuery for this:
var buttons = $("#searchable").find("button");
var color = ["red", "blue", "green"];
buttons.each(function(i){
$(this).css('color', color[i]);
});
Here is a link to my fiddle:
https://jsfiddle.net/x5ve63w5/1/
I have a div. I want it to link somewhere when you click on it, but I also want to put other links inside it, so when you click on the other links you're redirected to one place, but if you click anywhere else you're redirected somewhere else.
Here's a simple example. As it is, the "interior" link is located outside of the "exterior" link, no matter what I do.
<a href="#" class="exterior">
interior
</a>
fiddle: https://jsfiddle.net/p4ugexf4/
You can use the javascript onclick event on the parent element of the link(s):
.exterior {
display: block;
width:100px;
height:100px;
border: 1px black solid;
}
<div onclick="document.location.href='https://example.com';return true;" class="exterior">
interior
</div>
I don't recommend to use <a> in <a> element. Using <a> in <a> isn't valid. You can check the following document on the W3C validator:
<!DOCTYPE html>
<html>
<head>
<title>test link in link</title>
</head>
<body>
<a href="#" class="test1">
test
</a>
</body>
</html>
You can also use two different <a> elements (without using javascript - only CSS solution):
div {
position:relative;
border:1px solid red;
height:200px;
width:200px;
}
div a.ext {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:0;
}
div a.int {
position:relative;
z-index:999;
}
<div>
<a class="ext" href="https://example.com"></a>
<a class="int" href="https://stackoverflow.com">test</a>
</div>
A simple, practical, non-javascript solution:
Break up your main link into smaller chunks - something like:
<div>
First part of exterior link
interior
Second part of exterior link etc
</div>
You can use absolute positioning
.exterior {
display: block;
width:100px;
height:100px;
border: 1px black solid;
position: relative;
}
.interior {
position: absolute;
top: 20px;
left: 20px;
}
<a href="bla" class="exterior">
<a class="interior" href="blabla">Interior</a>
</a>
$(".exterior a").click(function(e){
alert('a clicked but div not triggered');
e.stopPropagation();
});
$(".exterior").click(function(e){
alert("div clicked but not a");
})
<div href = "#" class="exterior">
interior
</div>
.exterior{
width: 500px;
height: 100px;
background-color: red;
}
I used stop propagation on a element to prevent it from triggering the click on the div. And i used div as wrapper so you would have to put a windows.location if you want to redirect to an url inside the click function.
I'm not sure how you can achieve this with simply html and css. So i would suggest using jquery.
.exterior {
display: block;
width:100px;
height:100px;
border: 1px black solid;
}
<a href="http://bing.com" class="exterior">
<object>Interior</object>
</a>
demo
You could use positioning to display a link within anoter link/container.
I have created an example, it's not perfect but will give you an idea.
https://codepen.io/MartynMc/pen/gRyqXL
HTML:
<div class="container">
<a class="link1" href="link1.com"></a>
<a class="link2" href="link2.com">link2</a>
</div>
CSS:
.container {
width: 250px;
height: 250px;
border: 2px solid;
position: relative;
}
.link1 {
display: block;
width: 100%;
height: 100%;
position: absolute;
}
.link2 {
display: block;
top: 75px;
left: 50px;
font-size: 24pt;
position: absolute;
width: 150px;
height: 50px;
border: 2px solid red;
text-align: center;
line-height: 50px;
}
How do I create an url link prefixed with a small thumbnail-image, such that when I hover on them, BOTH the link color and the thumbnail-image change
Example:
Im now using an image tag that goes with an anchor tag, Im able to change the anchor tag text color on hover, however I dont know how to change the img src accordingly
CSS:
.hoverable-link {
color: gray;
}
.hoverable-link:hover {
color: blue;
}
HTML:
<div>
<img src="thumbnail-1"> //Change to thumbnail-2
Cool Link
</div>
JsFiddle: https://jsfiddle.net/rbb5ow1v/9/
In conclusion:
[1] How can I change img src when it's on hover
[2] How can I trigger hover-event for both element at the same time
I would give fontello.com a go
Once you have chosen the desired icons set up your tag as follows
<span class="icon-twitter"></span>example
When you do the CSS you just have to apply a hover state to the anchor and because of fontello it will change that colour too by just using the CSS color attribute.
EDIT:
If you are using a specific twitter icon that you made. Try changing it to an SVG, and change its fill. Same can be applied to the fontello where you can display none and reveal on hovers.
[1] How can I change img src when it's on hover
You can't do this with CSS alone, as src is a DOM attribute not a CSS attribute, to accomplish this some javascript is required with HTML DOM Event system
<body>
<div>
<img onmouseenter="highlight(this)" onmouseleave="unhighlight(this)"
src="thumbnail1">
Some Link
</div>
<script>
function highlight(image) {
image.src = "thumbnail2"; //Blue Image
}
function unhighlight(image) {
image.src = "thumbnail1"; //Gray Image
}
</script>
</body>
JsFiddle: https://jsfiddle.net/f0c7p3tL/2/
List of DOM Events: http://www.w3schools.com/jsref/dom_obj_event.asp
Another approach is to not using the src DOM attribute at all. Instead you can use the background CSS attribute, that way you can utilize the CSS:hover selector
CSS:
#my-thumbnail {
background: url("/thumbnail1") no-repeat;
width: 32px;
height: 32px;
}
#my-thumbnail:hover {
background: url("/thumbnail2") no-repeat;
}
HTML:
<div>
<img id="my-thumbnail">
Some Link
</div>
JsFiddle: https://jsfiddle.net/7xoprwky/
[2] How can I trigger hover-event for both element at the same time
Again, two approaches are available here.
First is using javascript and the HTML DOM Events. In this approach, instead of triggering events on either of the child elements, we want them to be triggered on the surrounding <div> parent element. Then, in the event handler, we select the child elements and change their DOM Attribute accordingly
<body>
<div onmouseenter="highlight(this)" onmouseleave="unhighlight(this)">
<img id="my-thumbnail" src="thumbnail1">
<a id="my-anchor" href="#potato">Some Link</a>
</div>
<script>
var myThumbnail = document.getElementById('my-thumbnail'),
myAnchor = document.getElementById('my-anchor');
function highlight() {
myThumbnail.src = "/thumbnail2";
myAnchor.style.color = "blue";
myAnchor.style.fontWeight = "bold";
}
function unhighlight() {
myThumbnail.src = "/thumbnail1";
myAnchor.style.color = "gray";
myAnchor.style.fontWeight = "normal";
}
</script>
</body>
JsFiddle: https://jsfiddle.net/2uthconL/
In the second approach we utilize the CSS selector syntax to highlight our internal element from our surrounding div
CSS:
#my-thumbnail-link {
}
#my-thumbnail-link img { /* Select all img tag inside div */
background: url("/thumbnail1") no-repeat;
width: 32px;
height: 32px;
}
#my-thumbnail-link:hover img { /* Select all img tag inside div when it is hovered */
background: url("/thumbnail2") no-repeat;
}
#my-thumbnail-link a { /* Select all a tag inside div */
color: gray;
}
#my-thumbnail-link:hover a { /* Select all a tag inside div when it is hovered */
color: blue;
font-weight: bold;
}
HTML:
<div id="my-thumbnail-link" class="vcenter-parent">
<img class="vcenter-child">
Some Link
</div>
JsFiddle: https://jsfiddle.net/x61dy0mk/2/
More on CSS Selector: http://www.w3schools.com/cssref/css_selectors.asp
If your thumbnail is just a static asset, I recommend the CSS approach over the Javascript HTML DOM one for its readability and maintainability (imagine keeping thousands of event handlers)
maybe you can try this one:
html
css for styling
.twitterbird {
margin-bottom: 10px;
width: 160px;
height:160px;
display:block;
background:transparent url('twitterbird.png') center top no-repeat;
}
.twitterbird:hover {
background-image: url('twitterbird_hover.png');
}
this answer is based on this question CSS: image link, change on hover
Update - Just try this one:
html
<ul>
<li><a id="hoverable" href="#"><i class="home-icon"></i><span class="text">Link 1</span></a></li>
<li><a id="hoverable" href="#"><i class="tshirt-icon"></i><span class="text">Link 2</span></a></li>
</ul>
css
a {
color: black;
text-decoration: none;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.home-icon {
background: url("http://s1.postimg.org/gk5fbl6vv/home_black.png") no-repeat;
width: 32px;
height: 32px;
display: inline-block;
margin-right: 20px;
}
a:hover .home-icon {
background: url("http://s2.postimg.org/43870q29h/home_green.png") no-repeat;
}
.tshirt-icon {
background: url("http://s30.postimg.org/61bqc12fh/tshirt_black.png") no-repeat;
width: 32px;
height: 32px;
display: inline-block;
margin-right: 20px;
}
a:hover .tshirt-icon {
background: url("http://s17.postimg.org/3x9qzn8sb/tshirt_green.png") no-repeat;
}
a#hoverable:hover {
color: green;
font-weight: bold;
}
demo is on this link https://jsfiddle.net/nv4dw8vr/
I'm trying to create the following:
Using two images: one as mask (the diagonal lines) and the other the image and text themselves (the mask and image+text are the same size):
..and I just can't get it done!
I've tried all combinations with divs and z-indeces, opacity and background-image.. (should mention I'm noob to html).
Here's one shot I got at it (with only the mask and an image):
div {
position: absolute;
top: 775px;
left: 0px;
height: 188px;
width: 272px;
background-image: url('grey-out.png');
}
img {
z-index: 1000;
}
<div></div>
<img src="41_large.png" />
Which just gives the diagonal lines themselves..
Can someone please help me out?
How do I make that "disabled" look combining the (semi-transparent) mask and the div?
Thanks!
This approach works:
<div id="pspThing" class="disabled">
<img class="disabled" src="http://i.stack.imgur.com/lCTVr.png" />
</div>
#pspThing {
background: transparent url(http://i.stack.imgur.com/WpgNy.jpg) 0 0 no-repeat;
height: 93px;
width: 273px;
border: 1px solid #000;
margin: 0 auto;
overflow: hidden;
}
#pspThing img {
display: none;
opacity: 0.5;
}
#pspThing img.disabled {
display: block;
}
JS Fiddle demo
Bearing in mind that there's no transparency in your striped png (so far as the imgur hosted image is concerned, anyway, so I'm using opacity instead). Also the JS Fiddle demo's a little more complicated than necessary, so's I could show the disabled/enabled states.
Pleass consider this simple snippet. Very universal solution. Acts and feels very much like the 'disable' attribute of input elements. See the snippet
function disable(elementId, enabling) {
el = document.getElementById(elementId);
if (enabling) {
el.classList.remove("masked");
} else
{
el.classList.add("masked");
}
}
.masked {
position: relative;
pointer-events: none;
display: inline-block;
//visibility:hidden; /* Uncomment this for complete disabling */
}
.masked::before {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
visibility: visible;
opacity: 0.5;
background-color: black;
//background: url('http://i.imgur.com/lCTVr.png'); /* Uncomment this to use the image */
content: "";
}
<button onclick="alert('Now, click \'OK\' then \'Tab\' key to focus next button.\nThen click \'Enter\' to activate it.');">Test</button>
<div id="div1" style="display:inline-block" class="masked">
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<br/>
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<img src="http://i.stack.imgur.com/WpgNy.jpg">
</div>
<button>Dummy</button>
<br/>
<button id="enableBtn" onclick="disable('div1',true);disable('enableBtn',false);disable('disableBtn',true);">Enable</button>
<button id="disableBtn" onclick="disable('div1',false);disable('enableBtn',true);disable('disableBtn',false);" class="masked">Disable</button>
I built an example here.
I doubt that the position:absolute approach is the best way to handle this since you need to know the size of the image.
For doing it by z-index your both images should be in the container with img tag.