I have a group of elements which on hover, I want to increase the padding of that element and not the group of elements.
This is the HTML of the page.
<div id="share-article-container">
<div id="share-article">
<?php include('share_article_content.php');?>
</div>
<div id="share-bubbles">
<div id="link-bubble" style="margin-top:55px" class="bubble"><span style="position: absolute;margin-left:5px;text-align:center;font-size:20px;">Copiar enlace</span></div>
</div>
</div>
This is the file share_article_content.php
<a style="background:#25D366" target="_blank" href="https://wa.me/?text=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'])?>"><img style="height:25px" src="images/whatsapp_icons/WhatsApp_Logo_2.png"></a>
<a onclick="copyToClipboard()" id="share-article-link"><i style="color:white;font-size:25px;" class="fas fa-link"></i></a>
<a style="background:#1778f2" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'])?>" target="_blank"><img style="height:25px;" src="images/facebook_icons/logo.png"></a>
<a target="_blank" href="https://twitter.com/intent/tweet?url=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'])?>"><img style="height:25px;" src="images/twitter_icons/twitter-xxl.png"></a>
<i style="color:white;font-size:25px;" class="far fa-envelope"></i>
This is the CSS for these elements:
#share-article a{
display: block;
text-align: center;
padding: 10px;
padding-bottom: 5px;
transition: 0.5s;
}
And this is the JQuery I'm using to solve this:
$("#share-article").on("mouseenter", "a", function(){
$(this).css("width", "70px");
});
$("#share-article").on("mouseleave","a", function(){
$(this).css("width", "50px");
});
When I attempt this with the shown code this is what happens:
Not on hover:
Hovering on Whatsapp:
All elements are being affected, but I want only the element being hovered to be affected.
You can simply use a img selector without $() .
Demo Code :
$("#share-article").on("mouseenter", "img", function() {
$(this).css("width", "70px");
});
$("#share-article").on("mouseleave", "img", function() {
$(this).css("width", "50px");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="share-article-container">
<div id="share-article">
<div>
<a style="background:#25D366" target="_blank" href=""><img style="height:50px" src="https://i.pinimg.com/originals/25/07/28/2507288cc5191483075bc6aba6771aa3.jpg"></a>
</div>
<div>
<a style="background:#25D366" target="_blank" href=""><img style="height:50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQOah0u5VksX76TPAhx-0HUHurBXuDkhAndAw&usqp=CAU"></a>
</div>
</div>
<div id="share-bubbles">
<div id="link-bubble" style="margin-top:55px" class="bubble"><span style="position: absolute;margin-left:5px;text-align:center;font-size:20px;">Copiar enlace</span></div>
</div>
</div>
I was changing the width of the a element without having an initial width.
#share-article a{
display: block;
text-align: center;
padding: 10px;
padding-bottom: 5px;
transition: 0.5s;
width: 50px
}
The problem was not having the width set in the first place. Once it was added the JQuery worked fine.
I am using swiper slider and would like to have navigation arrows outside of the slider. What I would basically like to do is the same as it looks like on airbnb site, where slider with images takes up whole 12 column row, but arrows are outside of it.
I am using bootstrap twitter css framework and I have tried various things but nothing worked and don't know how to achieve this?
The css is this:
.swiper-container {
margin-top: 50px;
position: relative;
}
.arrow-left {
position: absolute;
top: 50%;
left: 0;
}
.arrow-right {
position: absolute;
top: 50%;
right: 0;
}
Html looks like this:
<div class="row swiper-container">
<div class="arrow-left">
<i class="ion-chevron-left"></i>
</div>
<div class="col-md-12 swiper-wrapper">
#foreach($videos as $video)
<div class="swiper-slide video-card">
<header class="card__thumb">
<img src="{{ $video->getThumbnail() }}"/>
</header>
<div class="card__body">
<div class="card__category">
</div>
<small>
{{ $video->created_at->diffForHumans() }}
</small>
<span class="video-title">
<p>
#if($video->title != '')
{{ $video->title }} <i class="ion-arrow-right-c"></i>
#else
Untitled
#endif
</p>
</span>
</div>
</div>
#endforeach
</div>
<div class="arrow-right">
<i class="ion-chevron-right"></i>
</div>
</div>
And this is the script:
var carousel = function carousel() {
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
nextButton: '.arrow-left',
prevButton: '.arrow-right',
slidesPerView: 4,
simulateTouch: false,
spaceBetween: 15,
breakpoints: {
1181: {
slidesPerView: 4
},
1180: {
slidesPerView: 3
},
1020: {
slidesPerView: 2
},
700: {
slidesPerView: 1
}
}
});
};
$(document).ready(function () {
carousel();
});
I just did this for one of my current projects.
You just have to change the location of the navigation HTML buttons and put them outside the swiper-container. For a better approach and behavior from the library, add a new class to them, and change the element in the JavaScript call.
Example:
<div class="swiper-container">
<div class="swiper-slides"></div>
</div>
<div class="swiper-button-prev-unique"></div>
<div class="swiper-button-next-unique"></div>
let carousel = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next-unique',
prevEl: '.swiper-button-prev-unique'
}
});
That worked perfect, and you can put your arrows outside the wrapper with ease with CSS.
For all my React folks out there:
import { Swiper as SwiperClass } from 'swiper/types';
import { Swiper, SwiperSlide } from 'swiper/react';
export const MySwiper = () => {
const [swiperRef, setSwiperRef] = useState<SwiperClass>();
const theSlides = useMemo(()=> ['slide one', 'slide two'], [])
const handlePrevious = useCallback(() => {
swiperRef?.slidePrev();
}, [swiperRef]);
const handleNext = useCallback(() => {
swiperRef?.slideNext();
}, [swiperRef]);
return (
<div>
<div>
<button onClick={handlePrevious }>
previous
</button>
</div>
<Swiper
onSwiper={setSwiperRef}
>
{theSlides.map((slide) => (<SwiperSlide key={slide}>{slide}</SwiperSlide>)
</Swiper>
<div>
<button onClick={handleNext}>
Next
</button>
</div>
</div>
);
};
If you using multiple swipers then you need to add different class names to swiper-cotainer and pagination arrows. And then create new Swiper and bind each arrows to local swiper.
let arr_next = $('.template-next') //your arrows class name
let arr_prev = $('.template-prev') //your arrows class name
$('.swiper-container--template').each(function (index, element) {
$(this).addClass('swiper' + index);
arr_next[index].classList.add('template-next' + index);
arr_prev[index].classList.add('template-prev' + index);
new Swiper('.swiper' + index, {
slidesPerView: 2,
navigation: {
nextEl: '.template-next'+index,
prevEl: '.template-prev'+index
},
slidesPerView: 2,
//spaceBetween: 100,
loop: true,
breakpoints: {
961: { slidesPerView: 2 },
740: { slidesPerView: 1 },
},
});
});
`
var swiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: 3,
spaceBetween: 10,
autoplay: 3500,
autoplayDisableOnInteraction: false,
loop: true,
breakpoints: {
1024: {
slidesPerView: 3,
spaceBetween: 40
},
768: {
slidesPerView: 3,
spaceBetween: 30
},
640: {
slidesPerView: 2,
spaceBetween: 20
},
320: {
slidesPerView: 1,
spaceBetween: 10
}
}
});
.container{max-width: 600px;margin: 0 auto;}
.swiper_wrap{padding:0px 50px;height:100%;width: 100%;position: relative;display: block;text-align: left;}
.swiper-button-next{
margin-top: 0px;
position: absolute;
top: 50%;
right: -40px;
width: 45px;
height: 45px;
transform: translateY(-50%);
}
.swiper-button-prev{
position: absolute;
top: 50%;
left: -40px;
width: 45px;
height: 45px;
transform: translateY(-50%);
margin-top: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet"/>
<div class="container">
<div class="swiper_wrap">
<div class="slider-wrapper">
<div class="swiper-button-prev"></div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">
<img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
</a>
</div><div class="swiper-slide">
<a href="#">
<img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
</a>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<script src="http://www.jakse.si/test/jakse/taxi/js/swiper.min.js"></script>
This works for me, it is the same like older answer, but maybe it looks better :)
Put this below swiper block:
.section {
.swiper-button-prev {
left: -20px;
}
.swiper-button-next {
right: -20px;
}
}
<div class="section">
<div class="swiper">
<ul class="swiper-wrapper">
<li class="swiper-slide">
</li>
</ul>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
if anyone is interested I've found an easy work-around for this issue
position: fixed; will override the overflow:hidden; of the parent but it will make it appear relative to the root element, adding transform to the wrapper will make it relative again to the parent.
new Swiper(".my-swiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
}
});
.custom-swiper-wrapper {
transform: translate(0, 0);
.swiper-custom-nav {
position: fixed;
}
}
<div class="container custom-swiper-wrapper">
<div class="swiper my-swiper">
<div class="swiper-wrapper">
swiper items here
</div>
<div class="swiper-button-next swiper-custom-nav"></div>
<div class="swiper-button-prev swiper-custom-nav"></div>
</div>
</div>
This is a general solution. To move your arrows outside the container you'll need to first remove the arrow divs from .swiper-container.
Make another bigger container that has .swiper-container and your moved arrows. Give this bigger container position: relative as a reference to arrows that have position: absolute.
Make sure that the .swiper-container width is changed to a value smaller than 100% (e.g. 90% 95%) to avoid overlapping with the arrows.
If you like to keep the .swiper-container width same as that of the entire page width then give -ve margin to the bigger container.
This works if slidesPerView = 1:
.swiper-container {
padding-left: 50px;
padding-right: 50px;
}
.swiper-slide {
visibility: hidden;
}
.swiper-slide.swiper-slide-active {
visibility: visible;
}
In the wrapper function "carousel" we are using to initialize our Swiper instance we can use Swiper's native methods slideNext and slidePrev to add event listeners explicitly to ONLY children of a shared parent element.
1020: {
slidesPerView: 2
},
700: {
slidesPerView: 1
}
}
});
mySwiper.el.parentElement.querySelector(".arrow-left").addEventListener('click',
() => mySwiper.slideNext());
mySwiper.el.parentElement.querySelector(".arrow-right").addEventListener('click',
() => mySwiper.slidePrev());
};
For this to work fully, .swiper-container, .arrow-right and .arrow-left will need to share a wrapper. In Leff's case ".swiper-container" should work just fine:
<div class="row swiper-container">
<div class="arrow-left">
Because this approach allows us to isolate selected elements to a shared parent container, this can be safely used as part of a block of code that might appear more than once.
This is the basic example of how to achieve it. You were close. I slightly modified the code to make it visible within the snippet.
$(document).ready(function () {
var carousel = function carousel() {
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
nextButton: '.arrow-left',
prevButton: '.arrow-right',
slidesPerView: 4,
simulateTouch: false,
spaceBetween: 15,
breakpoints: {
1181: {
slidesPerView: 4
},
1180: {
slidesPerView: 3
},
1020: {
slidesPerView: 2
},
700: {
slidesPerView: 1
}
}
});
};
carousel();
});
.row.swiper-container {
margin-top: 50px;
position: relative;
width: 70%;
margin: 0 auto;
}
.arrow-left {
position: absolute;
background: gray;
top: 50%;
left: -40px;
width: 20px;
height: 20px;
transform: translateY(-50%);
}
.arrow-right {
position: absolute;
background: gray;
top: 50%;
right: -40px;
width: 20px;
height: 20px;
transform: translateY(-50%);
}
.swiper-wrapper {
margin: 0 auto;
height: 200px;
background: #f00;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.jquery.min.js"></script>
<div class="row swiper-container">
<div class="arrow-left">
<i class="ion-chevron-left"></i>
</div>
<div class="col-md-12 swiper-wrapper">
<div class="swiper-slide video-card">
<header class="card__thumb">
<img src="{{ $video->getThumbnail() }}"/>
</header>
<div class="card__body">
<div class="card__category">
</div>
<small>
</small>
<span class="video-title">
<p>
</p>
</span>
</div>
</div>
</div>
<div class="arrow-right">
<i class="ion-chevron-right"></i>
</div>
</div>
Ok, I had another method,
What the guys suggesting will not work with multiple sliders on page.
So, I added another two arrows, which will trigger the real arrows.
the swiper had:
{
navigation: {
nextEl: '.xnext',
prevEl: '.xprev',
}
}
$('.swiper-button-next').click(
function(e){
$(this).parents('.swiper-container').find('.xnext').trigger('click');
});
$('.swiper-button-prev').click(function(e){$(this).parents('.swiper-container').find('.xprev').trigger('click');});
The code below help to use more than one swiper, using one class. (At first I was used this in a php loop of swipers)
const swiperContainers = document.querySelectorAll('#swiper-global-container');
const swipers = document.querySelectorAll('#swiper-global-container .swiper');
swipers.forEach((swiper, index) => {
swiper.classList.add(`swiper-${index}`);
})
swiperContainers.forEach((container, index) => {
container.querySelector('.swiper-button-next').classList.add(`swiper-next-${index}`)
container.querySelector('.swiper-button-prev').classList.add(`swiper-prev-${index}`)
})
swipers.forEach((swiper, index) => {
new Swiper(`.swiper-${index}`, {
navigation: {
nextEl: `.swiper-next-${index}`,
prevEl: `.swiper-prev-${index}`,
},
});
});
html,
body {
margin: 0;
padding: 0;
}
main {
display: flex;
flex-direction: column;
min-width: 1300px;
}
#swiper-global-container {
flex: 1;
position: relative;
max-width: 1250px;
margin: 0 auto;
}
.swiper-slide {
max-height: 50vh;
}
.swiper {
max-width: 1200px;
margin: 0 auto;
}
.swiper-button-prev {
left: -50px !important;
}
.swiper-button-next {
right: -50px !important;
}
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<main>
<div id="swiper-global-container">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1652961735386-883c83e4d464?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670"
alt="">
</div>
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1572035563691-0944e6a816d5?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670"
alt="">
</div>
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1652697911040-52d0453522a6?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2574"
alt="">
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div id="swiper-global-container">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1652721684678-a147a957a03e?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2748"
alt="">
</div>
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1652898756182-04023f4135a1?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2664"
alt="">
</div>
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1652162539309-c96b2694f02b?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1655"
alt="">
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</main>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
I'm using react so I didn't want to go through the trouble of creating new event handlers for each of the toggles. I came up with a solution where you just add an extra div wrapper to the slide content and add padding:
html
<div class="row swiper-container">
<div class="arrow-left">
<i class="ion-chevron-left"></i>
</div>
<div class="col-md-12 swiper-wrapper">
#foreach($videos as $video)
<div class="swiper-slide video-card">
<div class="video-card-inner">
<header class="card__thumb">
<img src="{{ $video->getThumbnail() }}"/>
</header>
<div class="card__body">
<div class="card__category">
</div>
<small>
{{ $video->created_at->diffForHumans() }}
</small>
<span class="video-title">
<p>
#if($video->title != '')
{{ $video->title }} <i class="ion-arrow-right-c"></i>
#else
Untitled
#endif
</p>
</span>
</div>
</div>
</div>
#endforeach
</div>
<div class="arrow-right">
<i class="ion-chevron-right"></i>
</div>
</div>
css
.arrow-left {
left: 0;
}
.arrow-right {
right: 0;
}
.video-card {
padding: 0rem 2rem;
}
The padding within the slide will create a gap with the .video-card-inner element that will house all of your content, thus allowing the arrows to sit outside of your visible content. You can still achieve this with custom toggles, but it will also work with their default toggles.
Just stumbled upon this issue today, here's my attempt at solving it. Basically it only requires you wrapping .swiper-container inside additional .swiper-container-wrapper, as Swiper allows passing references to HTMLElement instead of selector string. And you also get to keep the class names, no discrete classes required for navigation elements or container.
At this point both navigation elements are placed inside .swiper-container-wrapper, as .swiper-container's siblings.
$('.swiper-container-wrapper').each(function (index, element) {
var swiperContainer = $(element).children('.swiper-container').get(0);
var nextEl = $(element).children('.swiper-button-next').get(0);
var prevEl = $(element).children('.swiper-button-prev').get(0);
new Swiper(swiperContainer, {
navigation: {
nextEl: nextEl,
prevEl: prevEl,
},
});
});
I have implemented custom prev next buttons(i ommit css styles for prev next buttons), but havent dots. Who know what is mistake I did?
// owl.carousel.css
.owl-controls {
text-align: center;
}
.owl-controls .owl-dot {
display: inline-block;
}
.owl-controls .owl-dot span {
background-color: #333;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
display: block;
height: 12px;
margin: 5px 7px;
width: 12px;
filter: Alpha(Opacity=500);/*IE7 fix*/
opacity: 0.5;
}
.owl-controls .owl-dot.active span, .owl-controls .owl-dot:hover span {
filter: Alpha(Opacity=100);/*IE7 fix*/
opacity: 1;
}
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
navText: ["<img src='prevArrow.png'>","<img src='nextArrow.png'>"],
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
})
});
</script>
<div class="owl-carousel">
<img src="lylka.png" alt="">
<img src="lylka.png" alt="">
<img src="lylka.png" alt="">
<img src="lylka.png" alt="">
<img src="lylka.png" alt="">
</div>
Use option dotsContainer, but sometimes it works oddly.
For example
<div id='carousel' class='owl-carousel'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
<ul id='carousel-custom-dots' class='owl-dots'>
<li class='owl-dot'><!-- Anything in here --></li>
<li class='owl-dot'></li>
<li class='owl-dot'></li>
</ul>
Next include this inside of your options object.
owl.owlCarousel({
dotsContainer: '#carousel-custom-dots'
});
The following tells Owl Carousel 2 to go to a slide based on the index of the dot that was clicked.
$('.owl-dot').click(function () {
owl.trigger('to.owl.carousel', [$(this).index(), 300]);
});
That should be all you need to get custom dots up and going with Owl Carousel 2.
via http://derickruiz.com/owl-carousel-custom-dots
You can solve the problem in this way:
HTML code
<section id="slider" class="content-slider row">
<div class="col-8 owl-carousel slide-cnt">
<div class="slide"><h3>TITOLO</h3></div>
<div class="slide"><h3>TITOLO</h3></div>
<div class="slide"><h3>TITOLO</h3></div>
</div>
<div class="col-4 dots-cnt">
<ul class="elenco-articoli">
<li>Titolo</li>
<li>Titolo</li>
<li>Titolo</li>
</ul>
</div>
JS code:
var owl;
owl = jQuery('.owl-carousel').owlCarousel({
loop:true,
autoplay: true,
autoplaySpeed: 600,
nav:true,
navText: ["<",">"],
dots:false,
items:1
});
jQuery('.elenco-articoli').on('click', 'li', function(e) {
owl.trigger('to.owl.carousel', [jQuery(this).index(), 300]);
});
This work for me.
If you want you can elaborate on: https://codepen.io/vbeetlejuice/pen/dRaero
CSS:
.owl-dots button i {
position: absolute;
z-index: 9999;
width: 100%;
height: 100%;
}
HTML:
<div class="testimonial_slider owl-carousel owl-theme">
<div class="item" data-dot="<button><i></i><img src='images/testimonial-1.jpg' alt='' class='img-fluid' /></button>">
<div class="testimonial-dec">
<h4>Aklima The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections Bonorum et Malorum original.</h4>
</div>
<div class="testimonial-name mt-4">
<p class="border-bottom d-inline-block"><span class="d-inline-block text-uppercase text-dark">AKLIMA</span> - COO, AMERIMAR ENTERPRISES, INC.</p>
</div>
</div>
</div>
jQuery:
$('.testimonial_slider').owlCarousel({
loop:false,
margin:32,
nav:false,
dots: true,
items:1,
mouseDrag: false,
dotsData: true,
});
enter image preview
In the following html the .pricing-item has a border which appears when it is hovered (.pricing-item:hover::after). I am trying to set it so that when the button (pricing-button btn-primary) is hovered, the css for the .pricing-item border is set to '0px;'.
<div class="pricing-item">
<div class="pricing-icon"></div>
<h3 class="pricing-title">Title</h3>
<div class="pricing-price"><span class="pricing-currency">$</span>200<span class="pricing-period">/ year</span></div>
<ul class="pricing-feature-list">
<li class="pricing-feature">Feature</li>
<li class="pricing-feature">Feature</li>
<li class="pricing-feature">Feature</li>
<li class="pricing-feature">Feature</li>
</ul>
<button class="pricing-button btn btn-primary">Choose plan</button>
In css file tried using ~ or + to make one class affect the other but just not getting it right. Any help would be appreciated. Thanks.
Here is a trick you can do, to achieve what you want.
.pricing-item-wrapper {
position: relative;
}
.pricing-item {
padding-bottom: 30px;
border: 1px solid red;
z-index: 1;
}
.pricing-button {
position: absolute;
bottom: 10px;
left: 1px;
z-index: 2;
}
.pricing-button:hover + .pricing-item {
border: 1px solid transparent;
}
<div class="pricing-item-wrapper">
<button class="pricing-button btn btn-primary">Choose plan</button>
<div class="pricing-item">
<div class="pricing-icon"></div>
<h3 class="pricing-title">Title</h3>
<div class="pricing-price">
<span class="pricing-currency">$</span>
200
<span class="pricing-period">/ year</span>
</div>
<ul class="pricing-feature-list">
<li class="pricing-feature">Feature</li>
<li class="pricing-feature">Feature</li>
<li class="pricing-feature">Feature</li>
<li class="pricing-feature">Feature</li>
</ul>
</div>
</div>
With your current HTML code, the short answer is : you can't.
The reason is : you try to access a parent element with CSS, which is not possible.
<div class="pricing-item">
...
<button class="pricing-button btn btn-primary">Choose plan</button>
</div>
You'll have to change something in your HTML, e.g :
<div class="pricing-item">
...
<button class="pricing-button btn btn-primary">Choose plan</button>
<div class="pricing-item-border"></div>
</div>
So it will make things a lot easier :
.pricing-item:hover .pricing-item-border { /* Display the border */}
.pricing-item:hover .pricing-button:hover + .pricing-item-border { /* Hide the border */}
Unfortunately no CSS selectors can go up the dom.. For this you'd have to use JS.
You could add that hover effect on pricing-item but not from just hovering on the button within that element.
A simple JS version would be:
$('.pricing-button.btn-primary').hover(
function() {
$(this).parent().css('border', '2px solid black');
},
function() {
$(this).parent().css('border', 'none');
}
);
CSS
.pricing-item.no-border{
border: 0px;
}
JS
$(".pricing-button".on({
mouseenter: function () {
//stuff to do on mouse enter
$(this).parents(".pricing-item").addClass("no-border");
},
mouseleave: function () {
//stuff to do on mouse leave
$(this).parents(".pricing-item").removeClass("no-border");
}
});