I have an issue right now and i am curious if there is a possible way to solve this. I have 2 div's enclosed in href elements. The problem is that i want to exclude the <p> element. Is there a way to do this despite it being inside the href element? Thanks.
<a href= "sample.com">
<div class="1">
<p>Hello</p>
</div>
</a>
<a href= "test.com">
<div class="2">
<p>Hello</p>
</div>
</a>
Yes you can but I wouldn't advocate for it.
You could use CSS to remove the appearance of a link:
a{
text-decoration: none;
}
p{
cursor: default;
color: #000;
}
Then you could use preventDefault() to prevent the p from triggering the action on click:
$("p").click(function(e){
e.preventDefault();
});
FIDDLE
What you really should do is add another wrapper to contain your elements and then wrap your div with an a like so:
<div class="wrapper">
<a href="http://www.google.com" target="_blank">
<div class="1"></div>
</a>
<p>Hello</p>
</div>
$(function(){
$('p').click(function(){
alert($(this).attr('href'));
// or alert($(this).hash();
});
});
Related
I have a section 2 blocks: one - with 3 images, second - with 3 links. Each image has it's own class (class=".img1") that is connected to a definite link with datakey=".img1".
When I hover over each link the definite image is being shown.
The section is a repeater block, that has a loop of images inside (I use ACF for this).
So when I have multiple sections on the page, the link hover from one section changes images in all other sections.
I was trying to use .each() to specify the parent section and then call .hover for links, but it doesn't work the way I need. I'm stuck in this and seems need to use another option.
JSfiddle with 1 section - https://jsfiddle.net/vernigoranataly/Lnwmjq3c/42/
JSfiddle with 2 sections - https://jsfiddle.net/vernigoranataly/kLtz5v4c/4/
JS:
$('.section_product-category ').each(function() {
$('.prodcat_btn .button-link').hover(
function() {
$($(this).data("key")).addClass('active');
$($('.prodcat_btn .button-link').not(this).data('key')).removeClass('active');
},
function() {
$($(this).data("key")).removeClass('active');
$($('.prodcat-img1')).addClass('active');
}
);
});
HTML:
<section class="section_product-category ">
<div class="prodcat_imgs">
<div class="prodcat_img prodcat-img1 active">
<img width="720" height="970" src="https://i.postimg.cc/k4pHm2DW/CTA-image.png" class="attachment-full size-full">
</div>
<div class="prodcat_img prodcat-img2">
<img width="345" height="480" src="https://i.postimg.cc/GhwC8fhG/visit-us-wine-glass.jpg" class="attachment-full size-full">
</div>
<div class="prodcat_img prodcat-img3">
<img width="1035" height="1440" src="https://i.postimg.cc/3NLm6GRH/social-image-three.jpg" class="attachment-full size-full">
</div>
</div>
<div class="prodcat_text">
<h2>Category #1 links</h2>
<div class="prodcat_btn btn">
<a class="button-link" data-key=".prodcat-img1" href="https://google.com">Link text here</a><br>
<a class="button-link" data-key=".prodcat-img2" href="https://google.ca">One more link btn</a><br>
<a class="button-link" data-key=".prodcat-img3" href="https://google.ua">Link text #3</a><br>
</div>
</div>
</section>
Update
I misunderstood what one part of your code was trying to do, and had replaced it with a different approach. I've updated my answer to use that part of your original code.
The problem is because each set has a <div> with the same class, like prodcat-img1, and the code which makes an image active:
$($(this).data("key")).addClass('active');
which evaluates to, eg:
$('.prodcat-img1').addClass('active');
matches all <div>s with that class, ie every one on the page.
The solution is to target only the ones in the current <section>, using something like:
$(this)
.closest('.section_product-category')
.find($(this).data("key"))
.addClass('active');
$(this) is the current element which triggered the hover/unhover event;
.closest() will traverse up the DOM tree until it finds the first match. In this case we look for the parent <section> which encloses this set of links and images;
.find() searches down the DOM tree from the current element for elements matching the selector. In this case we look for the (single!) element inside the <section> we found with a class matching your data-key;
Next, The same problem exists with this line:
$($('.prodcat_btn .button-link').not(this).data('key')).removeClass('active');
It will target every div on the page with the relevant class (eg .prodcat-img1), not just the one in the current section.
We can use the same fix though - start at the parent <section>, find the divs with active class, and remove that class. We just wrap the whole selector in the same code as above:
$(this)
.closest('.section_product-category')
.find($($('.prodcat_btn .button-link').not(this).data('key')))
.removeClass('active');
There is one other issue with this line - if you remove the class from the <div>s after you add it to the one we want, you're left with none of them with the class! :-) You need to remove the class from everything first, then add it to just the one we want. You already have that the right way around in the hover-out handler, just not in this hover handler.
Another issue is this code:
$('.section_product-category ').each(function() {
$('.prodcat_btn .button-link').hover( ...
Here you are iterating over all .section_product-category on the page, and adding handlers for $('.prodcat_btn .button-link'). But $('.prodcat_btn .button-link') matches every one of those elements on the page. So on the first iteration, you add a handler which matches every $('.prodcat_btn .button-link') on the page. The second iteration, you do it all again! The handlers just add up, they don't overwrite each other, and this means that every time you mouse over one of your links, your handler code runs 2x, or 3x if you have 3 sets, etc. You can confirm this by putting a console.log() inside your hover function - you'll see as many log lines written as you have <section>s, for a single mouse-over.
If you're lucky they won't interfere with each other, but depending on what they do they can, and you end up with weird behaviour. You can just remove the iteration - the single selector matches everything.
Here's a working snippet, starting from your 2-section JSFiddle, with those issues fixed:
$('.prodcat_btn .button-link').hover(
function() {
// $($(this).data("key")).addClass('active');
// $($('.prodcat_btn .button-link').not(this).data('key')).removeClass('active');
let $section = $(this).closest('.section_product-category');
// My original approach to remove active classes in this section
// $section.find('.prodcat_img').not($(this)).removeClass('active');
// Your original approach, updated to only target the current section
$section.find($($('.prodcat_btn .button-link').not($(this)).data('key'))).removeClass('active');
$section.find($(this).data("key")).addClass('active');
},
function() {
// $($(this).data("key")).removeClass('active');
// $($('.prodcat-img1')).addClass('active');
let $section = $(this).closest('.section_product-category');
$section.find($(this).data("key")).removeClass('active');
$section.find('.prodcat-img1').addClass('active');
}
);
.section_product-category {
display: flex;
width: 90%;
margin-bottom: 20px;
}
.section_product-category>div {
width: 70%;
}
.section_product-category>div:first-child {
width: 30%;
}
h2 {
margin-bottom: 45px;
}
.prodcat_img {
display: none;
overflow: hidden;
position: relative;
padding-top: 135%;
border: 1px solid blue;
}
.prodcat_text {
padding: 20px 20px 20px 40px;
}
.prodcat_img img {
position: absolute;
top: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
.prodcat_img.active {
display: block;
}
.button-link {
margin-bottom: 7px;
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="section_product-category ">
<div class="prodcat_imgs">
<div class="prodcat_img prodcat-img1 active">
<img width="720" height="970" src="https://i.postimg.cc/k4pHm2DW/CTA-image.png" class="attachment-full size-full">
</div>
<div class="prodcat_img prodcat-img2">
<img width="345" height="480" src="https://i.postimg.cc/GhwC8fhG/visit-us-wine-glass.jpg" class="attachment-full size-full">
</div>
<div class="prodcat_img prodcat-img3">
<img width="1035" height="1440" src="https://i.postimg.cc/3NLm6GRH/social-image-three.jpg" class="attachment-full size-full">
</div>
</div>
<div class="prodcat_text">
<h2>Category #1 links</h2>
<div class="prodcat_btn btn">
<a class="button-link" data-key=".prodcat-img1" href="https://google.com">Link text here</a><br>
<a class="button-link" data-key=".prodcat-img2" href="https://google.ca">One more link btn</a><br>
<a class="button-link" data-key=".prodcat-img3" href="https://google.ua">Link text #3</a><br>
</div>
</div>
</section>
<section class="section_product-category ">
<div class="prodcat_imgs">
<div class="prodcat_img prodcat-img1 active">
<img width="720" height="970" src="https://i.postimg.cc/k4pHm2DW/CTA-image.png" class="attachment-full size-full">
</div>
<div class="prodcat_img prodcat-img2">
<img width="345" height="480" src="https://i.postimg.cc/GhwC8fhG/visit-us-wine-glass.jpg" class="attachment-full size-full">
</div>
<div class="prodcat_img prodcat-img3">
<img width="1035" height="1440" src="https://i.postimg.cc/3NLm6GRH/social-image-three.jpg" class="attachment-full size-full">
</div>
</div>
<div class="prodcat_text">
<h2>Category #2 links</h2>
<div class="prodcat_btn btn">
<a class="button-link" data-key=".prodcat-img1" href="https://google.com">Link text here</a><br>
<a class="button-link" data-key=".prodcat-img2" href="https://google.ca">One more link btn</a><br>
<a class="button-link" data-key=".prodcat-img3" href="https://google.ua">Link text #3</a><br>
</div>
</div>
</section>
I am trying to achieve toggle of div using just inline css but its not working. please note that inline css is required no javascript. Thanks guys.
</head>
<body>
<div>
<a id="hide1" href="#hide1" class="hide">+ Expand</a>
<a id="show1" href="#show1" class="show" style="display: none;">- Expand</a>
<div class="details" style="display: none;">
Content goes here.
</div>
</div>
</body>
</html>
Use the summary / details HTML elements.
<details>
<summary>Expand</summary>
Content goes here.
</details>
Use a checkbox instead.
input:not(:checked) + .toggle {
display: none;
}
<span>Show</span><input type="checkbox" />
<div class="toggle">Hello World!</div>
Here are two potential situations in my HTML:
<div class="ptb_sold">
<span class="ptb_one_line">Sold</span>
</div>
<div class="ptb_link_button">
<a class="ptb_link_button" target="_blank" href="https://test.html">Click to Register</a>
</div>
<div class="ptb_sold"></div>
<div class="ptb_link_button">
<a class="ptb_link_button" target="_blank" href="https://test.html">Click to Register</a>
</div>
My goal is to hide "ptb_link_button" in the first one, but allow the "ptb_link_button" div to display in the second example. Basically, if the item is sold, I do not want to display the "Register" button.
I initially thought this would work:
div.ptb_sold:empty+.ptb_link_button {
display: none;
}
<div class="ptb_sold">
<span class="ptb_one_line">Sold</span>
</div>
<div class="ptb_link_button">
<a class="ptb_link_button" target="_blank" href="https://test.html">Click to Register - Link one</a>
</div>
<div class="ptb_sold"></div>
<div class="ptb_link_button">
<a class="ptb_link_button" target="_blank" href="https://test.html">Click to Register - Link two</a>
</div>
But unfortunately it does not. Any other suggestions?
If I understood you correctly, then I think this would be the approach:
// Hides the button if sold
div.ptb_sold + .ptb_link_button a.ptb_link_button {
display: none;
}
// Show the button if not sold
div.ptb_sold:empty + .ptb_link_button a.ptb_link_button {
display: block;
}
Example - https://jsfiddle.net/4o1gvnjx/
Also, I would consider changing the class name of the container for the button to be something like 'ptb_link_button-container' to avoid confusion. That way, the CSS selector would be more streamlined.
I've got a menu with 3 levels of deepness. It starts with the categories, then the subcategories, and after all, the final links. Some of these links are already in the second or even the first level, but that's not a problem. The menu is working fine.
The problem is that I'm trying to make it look fancy, so I added to each div a class that designates the menu level. You can see the full Angular template here. Mind that these classes are the "lvl0", "lvl1", "lvl2":
<div class="menu-container">
<div class="row header">
<img class="logo" src="../../../assets/menu-header.PNG">
</div>
<div class="row menu-btn">
<div class="inner-menu-btn" (click)="openMenu()">
<span class="menu-span" [#menuStringAnim]="active">MENU</span>
<i class="fa fa-bars menu-icon" [#menuIconAnim]="active"></i>
</div>
</div>
</div>
<div class="menu-list" [#menuListAnim]="active">
<div class="row row-fix lvl0" *ngFor="let category of getCategories()" (click)="openCategory(category)">
<div class="little-menu-bar-toplvl" *ngIf="categoriesNavigator.lvl0 == category.key"></div>
<span class="menu-top-level">{{ category?.title?.toUpperCase() }} </span>
<div *ngIf="categoriesNavigator.lvl0 == category.key">
<br>
<div class="row row-fix lvl1" *ngFor="let subcategory of getSubcategories(category.key)" (click)="openSubcategory(subcategory)">
<div class="little-menu-bar-midlvl"></div>
<span class="menu-second-level">{{ subcategory?.title?.toUpperCase() }} </span>
<div *ngIf="categoriesNavigator.lvl1 == subcategory.key">
<br>
<div class="row row-fix lvl2" *ngFor="let thirdLevel of getThirdLevel(category.key, subcategory.key)" (click)="openUrl(thirdLevel)">
<div class="little-menu-bar-lowlvl" *ngIf="categoriesNavigator.lvl0 == category.key"></div>
<span class="menu-third-level">{{ thirdLevel?.title?.toUpperCase() }} </span>
</div>
</div>
</div>
</div>
</div>
</div>
So these classes are very simple. I'm not very good at CSS (I prefer designing logic rather than designing), and maybe I'm doing some stupid thing here:
.lvl0 :hover{
color: orange;
}
.lvl1 :hover{
color: orange;
}
.lvl2 :hover{
color: orange;
clear: both;
}
So the behavior works nice for first level, but as you can see, all the rows with the second level get highlighted instead of just the one I'm hovering on:
Same happens with the third level.
Do you have any idea on what I'm doing wrong? I'm adding the Angular tag just in case it has something to do with my template code. Thank you!
The problem is that you have applied the style to your div and as the divs are nested, the styles will cascade and turn everything inside it the colour - you can try to apply the styles directly to the spans to avoid this. Also I have removed the space before your hover colon
.lvl0:hover>span { /* leave hover on div but style the span */
color: orange;
}
.lvl1:hover>span {
color: red;
}
.lvl2:hover>span {
color: green;
}
<div class="lvl0">
<span>test 0</span>
<div class="lvl1">
<span>test 1</span>
<div class="lvl2">
<span>test 2</span>
</div>
</div>
</div>
The :hover is basically propagating down to other levels. Do not use CSS on the parent directly. Instead, use it on something like span etc.
Check pen here to solve your issue. In your case, you can have <div> tag too instead of the span which closes there and is basically a sibling of next level.
.lvl:hover {
//common for all
color: orange;
}
I want to display a div on hovering the anchor tag using css. Below is my html code
<td class="cellStyle">
<a href="#" class="linkStyle">
<div>Home</div>
<div style="display:none;">I'm here... (some html) </div>
</a></td>
Please tell me how i can achieve this using css.
Thanks
Give your hidden div a class:
<td class="cellStyle">
<a href="#" class="linkStyle">
<div>Home</div>
<div class="demo">I'm here... (some html) </div>
</a></td>
And use these styles:
<style>
a.linkStyle div.demo { display:none; }
a.linkStyle:hover div.demo { display:block; }
</style>
Working jsfiddle: http://jsfiddle.net/6pB8G/
how to make sub menu appear when hover over link?
CSS
a.linkStyle:hover div.here {
display:block;
}
div.here {
display : none;
}
HTML
<a href="#" class="linkStyle">
<div>Home</div>
<div class="here">I'm here... (some html) </div>
</a>
(Added a class to div which is to be hidden first)
JSFIDDLE DEMO
Try this:
CSS:
.hiddendiv {display:none;}
.linkStyle:hover > .hiddendiv { display:block; }
HTML:
<a href="#" class="linkStyle">
<div>Home</div>
<div class="hiddendiv">I'm here... (some html) </div>
</a>
here is a working demo
It's better to keep block level elements outside from inline elements. So, try keeping DIV outside from A.
here is demo:
HTML
<td>
<a class="tooltip">Home</a>
<div class="tip">I'm here... (some html)</div>
</td>
CSS:
.tip{display:none}
.tooltip:hover + .tip{display:block}
Working Demo