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/
Related
i have implemented a button which should change the background color, into blue from black.
But i didnt find a easy way, how I can do that.
This is my HTML file
<div style="background-color: #161624; width: 100%; height: 20%; "></div <div style="background-color: #efece7; width: 100%; height: 60% "> </div> <div style="background-color: #161624; width: 100%; height: 20%; vertical-align: bottom ; "</div>
<button id="changecolor">Change Color</button>
</div>
I want that the button changecolor, change the background color, where the height is 20% at both.
enter image description here
The blueblack color should change
I would recommend using a seperate css file for this with classes of colors and designs depending on dark/light mode.
simply add a css class of example down below and add some javascript to be able to change the class on the button or element you want to use as the switch.
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
<body>
currently this is just pointing to the body but can easily be adjusted to point at any element you would like it to
Just let me know if you have any questions
I wanted to make this linkable image to have a text in a pop up box (not the type of pop up that is on w3schools, I want a classic yellowish box) when I mouseover. I tried to do it like this
<div class="folder1">
<a href="yourlinkhere" target="_self" >
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57"
title="This is some text I want to display." </a>
</div>
Opening the page in the link works great but there is no pop up box when I hover on it. Any help?
Currently, you are setting the title attribute to get a tooltip type hint when the element is hovered over. If this is what you are looking to do but perhaps just style the textbox to be, say, yellow, I would suggest using the following:
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[data]:hover:after {
content: attr(data);
padding: 4px 8px;
color: rgba(0,0,0,0.5);
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 2;
border-radius: 5px ;
background: rgba(0,0,0,0.5); /*Change this to yellow, or whatever background color you desire*/
}
<a data="This is the CSS tooltip showing up when you mouse over the link"href="#" class="tip">Link</a>
The above code was provided by Peeyush Kushwaha in this post. Simply change the anchor tag to your image tag, and apply styles as you see fit.
If by 'popup' you are looking for an alert to the user that requires interaction to close, you can use window.alert('text') in javascript in conjunction with the onmouseover event handler.
<img src="some_image.png" height="46px" width="57px" onmouseover="window.alert('Some Message')"/>
Otherwise, if you are looking for another element to be displayed upon mouseover of the image, you can use a bit of javascript to display a div or paragraph (really anything) upon mouseover of the img.
function showDiv() {
document.getElementById('popupBox').style.display = 'block';
}
#popupBox {
display: none;
}
<img src="some_image.png" width="41px" height="57px" onmouseover="showDiv()"/>
<div id="popupBox">Some Popup Text</div>
You can do this simply with CSS, or you can use one of many simple 'tooltip' JavaScript options. Bootstrap for example has this tooltip functionality built-in, ready to use. If you want something basic, here's a simple CSS-only approach that you can customise to your needs:
<!-- padding added here so you can see the pop-up above the folder, not necessary in-page -->
<div class="folder1" style="padding: 200px;">
<a href="yourlinkhere" target="_self" class="popper">
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57" />
<span class="pop-up">This is some text I want to display.</span>
</a>
</div>
<style>
a.popper {
display: inline-block;
position: relative;
}
.pop-up {
display: none;
position: absolute;
left: 0;
bottom: 100%;
padding: 1rem 1.5rem;
background: yellow;
color: black;
}
a.popper:hover .pop-up,
a.popper:focus .pop-up {
display: block;
}
</style>
Basically, you position the a tag relatively so that it can have absolutely positioned children, then relying on a:hover you show / hide the child using the child element's display property.
You can equally try this using css pseudo-element
a{
position: relative;
}
a:hover:after{
display:block;
content: "This is some text I want to display";
width: 200px;
background: yellow;
position: absolute;
top:0;
padding: 20px;
}
<div class="folder1" style="margin: 70px">
<a href="yourlinkhere" target="_self" class="">
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57"
</a>
</div>
I've created a vertical navigation on the left of our site. We'd like the background color for a .item to change based on the subdirectory where a user is viewing content. So if someone clicks on a nav .item, the href will redirect them to a page and we want that .item to be highlighted a unique hex color that we can customize for each nav .item. All 6 nav items would have a different color.
One point of clarification is that sometimes folks may visit our site without having ever clicked a navigation item. I want the navigation items to still be highlighted based on the current subdirectory where a person is viewing content. This helps them easily identify where they are and how to get back if they navigate to other parts of the community. Also if a person does a global search and stumbles upon content in one of our 6 main areas, we want the nav menu to instantly identify their current location (based on url) and highlight that nav .item in our vertical nav bar.
Is Javascript or Jquery the way to go? Any help would be appreciated!!
Heres a FIDDLE with all the code.
sample CSS:
.navback {
position: fixed;
top: 0;
left: 0px;
width: 100px;
height: 100%;
background: #283237;
z-index: 4;
}
.navbar {
position: fixed;
top: 44px;
left: 0px;
width: 100px;
height: 60vh;
background: #283237;
display: flex;
z-index: 5;
flex-direction: column;
}
.topbar {
border-top: 1px solid #000;
top: 44px;
}
.navbar .item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
padding-top: 40px;
padding-bottom: 40px;
max-height: 100px;
z-index: 5;
}
.navbar .item div.label {
color: #fff;
position: relative;
top: 5px;
font-size: 13px;
font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, "Segoe UI", sans-serif;
transition: all 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
left: -100px;
}
Sample HTML:
<div class="topbar"></div>
<div class="navback leftnav">
<div class="navbar">
<div class="item hvr-shrink">
<a href="https://community.canopytax.com/">
<div>
<img src="https://png.icons8.com/ios/35/ffffff/home.png"/>
<div class="label">Home</div>
</div>
</a>
</div>
<div class="item hvr-shrink">
<a href="https://community.canopytax.com/community-central/">
<div>
<img src="https://png.icons8.com/ios/40/ffffff/conference-call.png">
<div class="label">Central</div>
</div>
</a>
</div>
JS/jQuery
// get the first directory by splitting "/dir/path/name" into an array on '/'
// get [1] instead of [0] b/c the first should be blank. wrap in /s.
hereDir = "/" + window.location.pathname.split("/")[1] + "/";
// rebuild the URL since you're using absolute URLs (otherwise just use hereDir)
hereUrl = window.location.protocol + "//" + window.location.host + hereDir;
$(".item")
.find("[href^='" + hereUrl + "']")
.closest(".item").addClass("here");
Note .find("[href^=...]") selects things that start with what you're looking for.
CSS
/* now use .here to style */
.item.here {
background-color: purple;
}
.item.here .label {
font-weight: bold;
}
To answer your question directly, yes this could be done also via JavaScript/jQuery but there is a far simpler way using the css :active selector.
For example, if the user clicks the .item
then the code would be:
.item:active {
background-color: #cecece; // or whatever styling you want
}
Sidenote: As a webdesigner myself, in general i'd advise using the :hover selector when it comes to navbar highlightng instead of the :active one.
Use jquery in your html (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js)
Add the following script
$('.item').click(function(){
$('.item.active').removeClass("active");
$(this).addClass('active');
})
CSS
.item.active {
background-color: red;
}
Please see updated fiddle
If you are using jQuery you can loop through each anchor and test it against the current URL of the page like this:
$(function highlightCurrentUrl() {
var currentUrl = window.location.href;
var items = $(".item").each(function() {
var anchor = $(this).find('a');
$(this).removeClass('active');
//comparison logic
if (anchor.prop('href') == currentUrl) {
$(this).addClass("active");
}
});
});
What this does is add a class to the matching .item in the menu. (This won't work in JSFiddle due to Content Security policy so you will have to test it your own environment.)
Next, you will need to define the styles that will be applied to an .item.active DIV tag. And, if you want different colors for different items, you should probably give them ID's in you markup, so you can reference them individually:
<div class="item hvr-shrink" id="home-link">
<a href="https://community.canopytax.com/">
<div>
<img src="https://png.icons8.com/ios/35/ffffff/home.png"/>
<div class="label">Home</div>
</div>
</a>
</div>
<div class="item hvr-shrink" id="central-link">
<a href="https://community.canopytax.com/community-central/">
<div>
<img src="https://png.icons8.com/ios/40/ffffff/conference-call.png">
<div class="label">Central</div>
</div>
</a>
</div>
These rules are saying that when the active class is added to the div with the ID home-link or central-link it should have the following properties
#home-link.active {
background-color: blue;
}
#central-link.active {
background-color: green;
}
I'm trying to do a menu.
http://jsfiddle.net/yagogonzalez/pVcQG/
I want the image and the text hightlighted at the same time. When the mouse is over the image, the text is highlighted, but when the mouse is over the text, the image doesn't change.
By the way, I'm not able to remove the image border with border-style: none;.
I hope anyone can help me. Thanks a lot!
<div class="iniciocenter">
<div class="bloqueinicio">
<a href="?page_id=7">
<img class="imghover2" style="background-image: url('http://www.aprendicesvisuales.com/wp-content/themes/twentytwelve/images/inicio/nosotrosh.png');">nosotros
</a>
</div>
<div class="bloqueinicio">
<a href="?page_id=8">
<img class="imghover2" style="background-image: url('http://www.aprendicesvisuales.com/wp-content/themes/twentytwelve/images/inicio/cuentosh.png');">cuentos
</a>
</div>
</div>
Style
.iniciocenter {
text-align: center;
}
.imghover2 {
width:190px;
height:190px;
}
.imghover2:hover {
background-position:0px -190px;
}
.handlee{
font-family: handlee;
font-size: 24px;
font-size: 1.714rem;
line-height: 1.285714286;
margin-bottom: 14px;
margin-bottom: 1rem;
}
.bloqueinicio {
display:inline-block;
text-align: center;
font-family: handlee;
font-size: 22px;
font-size: 1.971rem;
color: #365F8B;
width:190px;
height:50px;
}
.bloqueinicio a {
text-decoration: none;
color: #375F8F;
}
.bloqueinicio a:hover {
color: #FF8000;
}
Add the below to the CSS to get the image highlighted on hovering the text.
.bloqueinicio a:hover .imghover2{
background-position:0px -190px;
}
Demo Fiddle
EDIT: The border appears when the img tag is used without a src attribute (as kind of a placeholder for the image). Here you are placing the image as a background. Hence, my suggestion would be to use an empty div tag instead of the img tag like shown below to do away with that border.
<div class="bloqueinicio">
<a href="?page_id=7">
<div class="imghover2" style="background-image: url('http://www.aprendicesvisuales.com/wp-content/themes/twentytwelve/images/inicio/nosotrosh.png');">
</div>
nosotros
</a>
</div>
Demo Fiddle 2
Additional Info: You might want to have a look at this SO thread also prior to implementing the suggestion mentioned in the edit. Basically it says as per HTML 4.01, block level elements weren't allowed inside <a>. But with HTML5, it is perfectly valid.
Change your HOVER rules like this:
.bloqueinicio:hover .imghover2 {
background-position:0px -190px;
}
...
.bloqueinicio:hover a {
color: #FF8000;
}
See the following fiddle: http://jsfiddle.net/H7DFA/
edit .imghover2:hover class like this :
.bloqueinicio a:hover img {
background-position:0px -190px;
}
http://jsfiddle.net/mohsen4887/pVcQG/5/
I want a button composed of some text and an icon next to it. I can specify that each has a :hover state in CSS to change its appearance, but how can I arrange my CSS/HTML such that rolling over the text appears to also change the image hover state, and vise versa?
Preferably avoiding JS.
Update: The current state of my fiddling around...
<a class="close"><div class="closebutt"></div></a>
a.close {
float:right;
font-size:12px;
color: #a7dbe6;
text-decoration:underline;
}
a.close:hover {
color: #fff;
}
a.vs_rewardClose:before {
content:"Close "
}
.closebutt {
background: url(images/close.gif) no-repeat;
display:inline-block;
width:14px;
height:14px;
}
.closebutt:hover {
background-position: 0px -14px;
}
With your HTML, changing the background-position of the div is just a matter of:
.close:hover > .closebutt {
background-position: 0px -14px;
}
In this way, the background-position changes only when its parent gets hovered.
This is the original answer I posted before you updated your question:
I usually organize my HTML in this way
<a href="#" class="button">
<div class="glyph"></div>
<div class="text">Button text</div>
</a>
EDIT: as #Paul D. Waite notes in the comments, this HTML structure is invalid in HTML4 because an a can contain only inline elements. So, to fix this we can change the structure in this way, having spans as children of the a. The CSS remains the same, eventually adding display: block if needed.
<a href="#" class="button">
<span class="glyph"></span>
<span class="text">Button text</span>
</a>
and your CSS in this way:
.button {
/* .. general style */
}
.button > .glyph {
/* .. general style for the glyph, like size or display: block */
background-image: url('..');
background-repeat: no-repeat;
background-position: left top;
}
.button > .text {
/* .. general style for the text, like font-size or display: block */
text-decoration: none;
}
.button:hover > .glyph {
/* .. change the glyph style when the button is hovered */
background-position: left bottom;
}
.button:hover > .text {
/* .. change the text style when the button is hovered */
text-decoration: underline;
}
In this way you can also change the style adding a new class to the button, in this way:
<a href="#" class="button red">
<div class="glyph"></div>
<div class="text">Button text</div>
</a>
<a href="#" class="button gray">
<div class="glyph"></div>
<div class="text">Button text</div>
</a>
And the CSS
.button.red {
background-color: red;
}
.button.red > .text {
color: black;
}
.button.gray {
background-color: darkgray;
}
.button.gray > .text {
color: white;
}
Enclose both in one element and add :hover to this element:
.parent:hover > .text { your hover state}
.parent:hover > .icon { your hover state}