Inline elements shifting when made bold on hover
Pre-set the width by using an invisible pseudo-element which has the same content and styling as the parent hover style. Use a data attribute, like title, as the source for content.
li {
display: inline-block;
font-size: 0;
}
li a {
display:inline-block;
text-align:center;
font: normal 16px Arial;
text-transform: uppercase;
}
a:hover {
font-weight:bold;
}
/* SOLUTION */
/* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */
a::before {
display: block;
content: attr(title);
font-weight: bold;
height: 0;
overflow: hidden;
visibility: hidden;
}<ul>
<li><a href="#" title="height">height</a></li>
<li><a href="#" title="icon">icon</a></li>
<li><a href="#" title="left">left</a></li>
<li><a href="#" title="letter-spacing">letter-spacing</a></li>
<li><a href="#" title="line-height">line-height</a></li>
</ul>the dropdown is behind the content page or when scrolling down
You need to add a z-index greater than the index of the elements that you want behind it, in your case the .main-nav element which defaults to 0 should be greater than the one of .owl-carousel which is currently 1. So the only change I made was that in the css.
$(document).ready(() => {
let navText = ["<i class='fa fa-chevron-left'></i>", "<i class='fa fa-chevron-right'></i>"]
$('.list-tlte').owlCarousel({
items: 2,
dots: false,
nav: true,
navText: navText,
loop: true,
autoplay: true,
autoplayHoverPause: true,
margin: 20,
responsive: {
500: {
items: 2
},
1280: {
items: 4
},
1600: {
items: 5
}
}
})
})@import url(https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Signika:wght@300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap);
:root {
--main-color: #4D6275;
--second-color: #3F5060;
--body-bg: #2E3841;
--box-bg: #272F37;
--text-color: #D5D5D5;
--grey-color: #B2B2B2;
--simple-color: #C3C3C3;
--content-height: 92px;
--space-top: 30px;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: var(--body-bg);
color: var(--text-color);
}
a {
text-decoration: none !important;
}
button:focus {
outline: none;
}
.wrapper {
position: relative;
width: auto;
height: 100%; /* 100vh */
padding: 15px;
font-size: 1.1em;
top: 0;
}
.main-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--body-bg);
/*Only change made*/
z-index:2;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--text-color);
height: var(--content-height);
border-bottom: 2px solid #3B4651;
}
.nav-menu {
list-style-type: none;
display: flex;
align-items: center;
margin-top: 5px;
margin-left: 170px;
font-size: 20px;
}
.nav-menu li ~ li {
margin-left: 50px;
}
.nav-menu li a {
color: var(--text-color);
}
.nav-menu li a:hover {
color: var(--grey-color);
}
.nav-menu li a i {
padding-left: 3.5px;
font-size: 15px;
}
.nav-options {
list-style-type: none;
display: flex;
align-items: center;
font-size: 20px;
}
.nav-search {
margin-right: 50px;
}
.nav-account {
margin-right: 50px;
}
.box-account {
margin-top: 10px;
background-color: var(--main-color);
border-radius: 3px;
min-width: 170px;
max-width: 350px;
height: 40px;
transition: 0.3s ease-in-out;
box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}
.box-account-name {
text-align: left;
padding-left: 20px;
padding-top: 2.5px;
font-size: 20px;
}
/*
.box-account-name i {
float: right;
margin-top: 8px;
margin-right: 10px;
font-size: 15px;
}
*/
.nav-account-avatar-display {
width: 32px;
height: 32px;
float: right;
clear: right;
margin-top: 2px;
margin-right: 10px;
margin-left: 10px;
border-radius: 50%;
}
.nav-account a {
color: var(--text-color);
}
.box-account:hover {
background-color: #3F5160;
transform: translateY(-10%);
}
.nav-search {
margin-top: 5px;
}
.nav-search a {
color: var(--text-color);
}
/* ------------ Dropdown ------------ */
.dropdown-btn-menu {
display: block;
}
/* ------------ Dropdown - Default ------------ */
.default-dropdown-menu {
background-color: var(--main-color) !important;
box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}
.default-dropdown-item {
background-color: var(--main-color) !important;
color: var(--text-color) !important;
}
.default-dropdown-item:hover {
background-color: #3F5160 !important;
color: var(--text-color) !important;
}
.default-dropdown-divider {
border-color: #354554;
}
.default-dropdown-item-title {
font-weight: 500;
}
/* ------------ Carousel ------------ */
.carousel-nav-center {
position: relative;
}
.carousel-nav-center .owl-nav button i {
font-size: 1rem;
}
.carousel-nav-center .owl-nav button {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.carousel-nav-center .owl-nav .owl-prev {
top: 0;
right: 45px;
padding-bottom: 300px;
transform: translateY(-150%);
}
.carousel-nav-center .owl-nav .owl-next {
top: 0;
right: 15px;
padding-bottom: 300px;
transform: translateY(-150%);
}
.carousel-nav-center .owl-nav .owl-prev:hover, .carousel-nav-center .owl-nav .owl-next:hover {
color: grey;
}
.box {
width: 99%;
margin: 0 0 20px;
background: var(--box-bg);
border: 5px solid var(--box-bg);
border-radius: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
}
.item-info span {
font-weight: 700;
}
/* ------------ Carousel END ------------ */
.my-anno-news {
width: 50%;
}
.news-item {
position: relative;
margin-bottom: 30px;
}
.news-item ~ .news-item {
padding-top: 30px;
border-top: 2px solid #3B4651;
}
.news-date {
position: absolute;
left: 0;
text-align: center;
width: 86px;
}
.day-news {
font-size: 30px;
color: #CACACA;
}
.month-news {
font-size: 11px;
font-weight: 600;
color: lightblue;
text-transform: uppercase;
display: block;
}
.title-news {
max-width: 600px;
margin: 0 auto;
}
.text-news {
color: grey;
max-width: 600px;
margin: 0 auto;
}
.title-news a {
color: unset;
}
.title-news a:hover {
color: lightblue;
}<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css?">
<!-- Bootstrap -->
<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css?">
<!-- Load sweetalert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<!-- OWL CAROUSEL -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />
<body>
<div class="wrapper">
<div class="main-nav">
<div class="nav">
<ul class="nav-menu">
<li class="nav-item">
<a href="#" role="button" class="dropdown-btn-menu" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Prime <i class="fa fa-chevron-down"></i>
</a>
<div class="dropdown-menu default-dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item default-dropdown-item" href="#">Prime Movies & Series</a>
<div class="dropdown-divider default-dropdown-divider"></div>
<a class="dropdown-item default-dropdown-item" href="#">Purchase prime</a>
<a class="dropdown-item default-dropdown-item" href="#">Checkout prime benefits</a>
<div class="dropdown-divider default-dropdown-divider"></div>
<a class="dropdown-item default-dropdown-item" href="#">High quality releases</a>
<a class="dropdown-item default-dropdown-item" href="#">Time on new releases</a>
</div>
</li>
<li class="nav-item">
<a href="{{ url('movies') }}">
Movies
</a>
<li class="nav-item">
<a href="{{ url('series') }}">
Series
</a>
</li>
</ul>
<ul class="nav-options">
<li class="nav-search">
<a href="#"><i class="fa fa-search"></i></a>
</li>
<li class="nav-account">
<a href="#" role="button" class="dropdown-btn-menu" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="box-account">
<div class="box-account-name">
<span class="name-account-nav">nameUser</span>
<img src="https://i.pinimg.com/474x/02/3e/eb/023eebc4bcee84dda420da10d3fe1c91.jpg" class="nav-account-avatar-display">
</div>
</div>
</a>
<div class="dropdown-menu default-dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item default-dropdown-item" href="#">Account settings</a>
<a class="dropdown-item default-dropdown-item" href="#">Preferences</a>
<a class="dropdown-item default-dropdown-item" href="#">Edit Notifications</a>
<div class="dropdown-divider default-dropdown-divider"></div>
<a class="dropdown-item default-dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</div>
</div>
<!-- content page -->
<div class="content-wrapper">
<div class="content-header">
<ul class="header-menu">
<li class="header-item active"><a href="#">Latest episodes</a></li>
<li class="header-item"><a href="#">Subtitled episodes</a></li>
<li class="header-item"><a href="#">View all</a></li>
</ul>
</div>
<div class="box">
<div class="list-tlte carousel-nav-center owl-carousel">
<a href="#">
<img src="https://wallpaperaccess.com/full/708459.jpg" alt="The Flash" class="img-ep">
<div class="item-name">Captain America: The First Avanger</div>
<div class="item-time">Season 1, episode 5</div>
</a>
<a href="#">
<img src="https://wallpaperaccess.com/full/317705.jpg" alt="Arrow" class="img-ep">
<div class="item-name">Captain America: The First Avanger</div>
<div class="item-time">Season 1, episode 5</div>
</a>
<a href="#">
<img src="https://i.pinimg.com/originals/00/3e/68/003e68e1fa1a1f610581ae85a0b519e5.jpg" alt="Supernatural" class="img-ep">
<div class="item-name">Captain America: The First Avanger</div>
<div class="item-time">Season 1, episode 5</div>
</a>
<a href="#">
<img src="https://wallpapercave.com/wp/wp1915188.jpg" alt="Blacklist" class="img-ep">
<div class="item-name">Captain America: The First Avanger</div>
<div class="item-time">Season 1, episode 5</div>
</a>
<a href="#">
<img src="https://wallpaperaccess.com/full/2308401.jpg" alt="Legacies" class="img-ep">
<div class="item-name">Captain America: The First Avanger</div>
<div class="item-time">Season 1, episode 5</div>
</a>
<a href="#">
<img src="https://wallpapercave.com/wp/wp6239059.jpg" alt="DC's Legends of Tomorrow" class="img-ep">
<div class="item-name">Captain America: The First Avanger</div>
<div class="item-time">Season 1, episode 5</div>
</a>
<a href="#">
<img src="https://wallpaperaccess.com/full/1092351.jpg" alt="Lucifer" class="img-ep">
<div class="item-name">Captain America: The First Avanger</div>
<div class="item-time">Season 1, episode 5</div>
</a>
<a href="#">
<img src="https://images.hdqwalls.com/wallpapers/bthumb/superman-and-lois-tv-series-4k-2021-te.jpg" alt="Superman & Lois" class="img-ep">
<div class="item-name">Captain America: The First Avanger</div>
<div class="item-time">Season 1, episode 5</div>
</a>
</div>
</div>
<div class="box my-anno-news">
<ul class="list-news-menu">
<li class="news-item">
<div class="news-date">
<div class="day-news">16</div>
<div class="month-news">July 2021</div>
</div>
<div class="content-news">
<div class="title-news"><a href="#">title for the news</a></div>
<div class="text-news">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
</div>
</li>
<li class="news-item">
<div class="news-date">
<div class="day-news">25</div>
<div class="month-news">December 2020</div>
</div>
<div class="content-news">
<div class="title-news"><a href="#">title for the news</a></div>
<div class="text-news">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
</div>
</li>
<li class="news-item" style="display: none;">
<div class="news-date">
<div class="day-news">16</div>
<div class="month-news">July 2021</div>
</div>
<div class="content-news">
<div class="title-news"><a href="#">title for the news</a></div>
<div class="text-news">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
</div>
</li>
<li class="news-item" style="display: none;">
<div class="news-date">
<div class="day-news">16</div>
<div class="month-news">July 2021</div>
</div>
<div class="content-news">
<div class="title-news"><a href="#">title for the news</a></div>
<div class="text-news">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
</div>
</li>
<li class="news-item" style="display: none;">
<div class="news-date">
<div class="day-news">16</div>
<div class="month-news">July 2021</div>
</div>
<div class="content-news">
<div class="title-news"><a href="#">title for the news</a></div>
<div class="text-news">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- end content page -->
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- OWL CAROUSEL -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>
</body>Can I have an onclick effect in CSS?
The closest you'll get is :active:
#btnLeft:active {
width: 70px;
height: 74px;
}
However this will only apply the style when the mouse button is held down. The only way to apply a style and keep it applied onclick is to use a bit of JavaScript.
targeting multiple classes at once
You will be needing Javascript for this. There is actually a technique to do this with radio buttons and pure css, but as it is actually a hack, and quiet dirty, I will move straight to the jquery solution.
You would have to add some selectors to your existing css:
.print.active ~ .print_text, .print:active ~ .print_text {
.print.active ~ .print_photo img, .print:active ~ .print_photo img {
As you will notice, the styling will now not only be triggered when the mouse is down(:active), but also when it contains a class .active
With a few line of jQuery you can toggle that class on click:
// when print is clicked
$('.print').click(function() {
// remove the old active
$('.print.active').removeClass('active');
// add the active class to the trigger
$(this).addClass('active');
});
A working example can be found here:
http://jsfiddle.net/WRwVf/
edit:
To include this code in your page, you would have to load the jQuery library first. Add something like this as the last node of your body:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Below this you could then put your script. Note that it would be wise to put it inside an 'ready' event as well. Something like this:
<script type="text/javascript">
// when the DOM is ready
$(document).ready(function() {
/* - The above code goes here - */
});
</script>
You can also put the script in a separate .js file, and load it in the same way as the jquery library, but as it is just a few lines of code, this will be considered overkill by some, as the extra http request would slow your page down.
Related Topics
How to Divide Bootstrap Col-Md Div to Half Vertically
Broke Page Styles of Vue.Js App (Webpack Template) When Live Changing It in Chrome Devtools
How to Stop CSS Hyphenation, No Dash Between Words
Flex: Justify-Content: Space-Around But Full Size on Both Ends
Combining Ie6 and Ie7 CSS Hacks in Same Stylesheet
Styling Kml with CSS in Google Maps V3
Disable HTML5 Video Download at CSS Breakpoint
How to Set Different Font-Weight for Fallback Font
Is There an Equivalent of Spriting for Svg Images in Web Pages
Bootstrap: How to Create a Series of Div on One Line Hiding The Overflowing Divs
Align Flex-Box Items to Baseline of Last Text Line in a Block
Need to Center Image in Web Page via CSS
Vertical Navigation with Rotated Text
How to Change The Color of Bootstrap Checkbox
I Am Gettiing an Error Expected New Line While Compiling Sass
100% Div Height Without Scrollbar
Sass: Selecting The Parent Element with Multiple Nested Selectors