I have a logo in the header of my website and I want the logo to direct you to the home page when it is clicked. In the code, the anchor is just surrounding the <img> tag, but on the website the entire div is clickable. How can I make it so that just when I hover on the image it is clickable, not the entire div.
<div class="row">
<div class="col-sm-12">
<a href="#Url.Action("index", "home")">
<img class="img-responsive" src="~/Content/img/stars.jpg" alt="Stars" />
</a>
</div>
</div>
I just found the answer. I needed to add the style display: inline-block to the <img> tag.
Related
Is there a way to guarantee that the size of the anchor element should be fully clickable?
I'm doing maintenance in a website where the parent div of the tag width is smaller than the area it should be clickable, so even if the element is the correct size, half of it is not clickable.
Basically this is the code:
<div class="col-xs-12 col-sm-2 col-md-1">
<div class="logo">
<a href="<?= base_url() ?>">
<img class="logo-img" src="https://via.placeholder.com/100" >
<img class="logo-icon-img" src="<?= base_url('site/images/logos/logo-icon.png') ?>" style="display: none">
</a>
</div>
</div>
When I add a style="display: inline-block" inside the tag, it fills the correct size (the image) of what should be clickable, but as the <div class="col-xs-12 col-sm-2 col-md-1"> is smaller than the image, the clickabe area is limited.
I would like to know if it's possible to force the clickable area without changing any CSS from the other classes/elements.
Even if I increase the <div class="logo"> width, the a clickable area is still limited to the its parent size.
Thanks!
I tried using display: flex in the anchor element styling and then the anchor element is taking the full width inside the div, I hope this is what you wanted.
Here is the working demo
Depending on where I put the </a> tag, the boxes look different. Here is what it looks like at the moment.
JSFiddle
<a href="#"> <div class="box">
<header><h2>Responsive C3</h2></header>
<div id="chartA">
</div>
</div></a>
How can I keep the first box as a clickable object while the second box is aligned side by side? With out the <a></a> tags then they align just fine.
the class box allow your blocks to float:left and therefore be side-by-side.
If you apply class="box" to the a tag instead of the div tag it will work as you expect.
<a href="#" class="box">
<div>
<header>
<h2>Responsive C3</h2>
</header>
<div id="chartA">
</div>
</div>
</a>
Here is a good article to understand more about float : https://css-tricks.com/all-about-floats/ and another about display: https://css-tricks.com/almanac/properties/d/display/
How to target a div to do a hover effect that is wrapped inside a href and all that sits inside main div like a holder? When the user hover on the item,i want for example the p element to have hover effet that it is inside div el with class item.
How to target elements like this? If it's possible to do only with css?
Something like this
<div id="ItemsEmployees">
<a href="">
<div class="itemHolder">
<div class="nameTitle">
</div>
<div class="item">
<p>I want only this div to have hover style</p>
</div>
</div>
</a>
</div>
You can use a descendant selector to select it. Here is some code:
<div id="ItemsEmployees">
<a id="anchor" href="">
<div class="itemHolder">
<div class="nameTitle"></div>
</div>
<div class="item">
<p>I want only this div to have hover style</p>
</div>
</a>
</div>
And then some CSS:
#anchor:hover .item {
/* Do stuff here */
}
What this does is select #anchor (which is link, I added an ID) and when it hovers, effects .item, which is the paragraph element.
Here's a JSBin demonstrating with font-size.
Using jquery.
$('#ItemsEmployees a').hover(function(){
$(this).css("background-color", "yellow");
})
Here div tag is parent and anchor tag is child of div tag, so all anchor tag inside the parent div tag is bindend with hover effects.
I want to use hover for a couple divs inside a tag.
For example here
<a href="#">
<div class="nextmatch_wrap">
<div class="clan12w">
<div class="TeamLogos">
<div class="Team" id="TeamContainer">
<img src="#">
</div>
</div>
</div>
<div class="clan12w">
<div class="TeamLogos">
<div class="Team" id="TeamContainer">
<img src="#">
</div>
</div>
</div>
</div>
If you hover on the a tag I want a colored border to appear on the "TeamContainer" and "TeamLogos"
I'm not good with css but I have tried like this
a nextmatch_wrap, :hover #TeamContainer, a nextmatch_wrap, :hover .r-home-team{
border:solid 1px #25c2f5;
}
It works but somehow the hover is like always ON when your mouse is on anywhere in the page but when you move your mouse out of the browser page the hover goes away, Any idea?
Your selector is not correct and the <a> tag is not closed. The > in the selector means that apply effect on <a> when it is hovered and <a> followed by <div>.
Here is what you can do.
a:hover > div {
border:solid 1px #25c2f5;
}
<a href="#">
<div class="nextmatch_wrap">
<div class="clan12w">
<div class="TeamLogos">
<div class="Team" id="TeamContainer">
<img src="http://placehold.it/100x100" />
</div>
</div>
</div>
<div class="clan12w">
<div class="TeamLogos">
<div class="Team" id="TeamContainer">
<img src="http://placehold.it/100x100" />
</div>
</div>
</div>
</div>
</a>
This is the css you need to use exactly for what you want:
a:hover #TeamContainer, a:hover .TeamLogos{
border:solid 1px #25c2f5;
}
The "," in a css's selector means that you're applying the same style to several elements and you use it to separate those elements (i.e: in my case, I'm applying that border style to every #TeamContainer located inside an <a> tag that's being hover, AND to every .TeamLogos inside an <a> tag hovered.)
You should add :hover immediately after the element that's being hovered, despite the element that's going to be affected.
The problem with your style's selector, is that you have :hover alone between commas, so that's selecting any element being hover.
Don't forget to close the <a> tag.
I have the following HTML template :
<div class='item'>
<img href='...' attributes='...' \>
<div class='popup' attributes='...'>
</div>
</div>
I use Jquery to on mouse over of the div (and thus the image), and show the popup. The problem is, I can't seem to control+click to open in a new tab in chrome nor firefox; neither can I right click the image and open the link in a new tab. How can I do this?
Add target="_blank" to the link. It should look something like this:
<div class='item'>
<img src='....' attributes='...' \>
<div class='popup' attributes='...'>
</div>
</div>
The link that you want the image to open goes in a href='LINK' and the file path to the image goes in img src='PATH'
Check this example
Here's the code markup with an example of an image (ctrl+click on it and it will take you to google.com):
<div class="item">
<a href="http://www.google.com">
<img src="https://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" attributes="#"\>
</a>
<div class="popup" attributes="#">
</div>
</div>
You just needed to wrap your <img> tag with an <a> tag.
Hope it helps!
Surround your image with <a> tags and link to a new page which has the image on it.
All you need is
<div class='item' >
<a href='...' attributes='...' target="_parent">
<img src="yoursource.jpg"/></a>
<div class='popup' attributes='...'>
</div>
</div>
Add target="_parent" or you could use _blank to your href (and remove the img for now), then close the href with > and make and new img field. wrap your href and img with Should work now