I have two buttons. The first is a dropdown menu that when hovered, shows two sibling <a href>.
The other button is also a sibling, a formaction redirect to a different page.
Problem #1
I want both bg-color and color of the dropdown menu button to change when hovering one of its <a href> .
Problem #2
I want both bg-color and color of the dropdown menu button to change when hovering the latter formaction button.
I have tried figuring it out with the css below but I can't seem to make it work.
.movie-info:hover .dropbtn{
background-color: #A7A774;
color: white;
}
my css and html:
.dropbtn {
width: 210px;
background-color: #CECE99;
color: black;
font-family: 'peninim';
font-size: 15px;
padding: 3px 0;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #A7A774;
color: white;
min-width: 210px;
z-index: 1;
font-family: peninim;
}
.dropdown-content:hover a {
display: block;
}
.dropdown-content a {
color: white;
padding: 3px 12px;
text-decoration: none;
display: block;
font-size: 15px;
text-align: center;
border-top: 2px solid #767676;
border-right: 2px solid #212121;
border-bottom: 2px solid #212121;
border-left: 2px solid #767676;
}
.dropdown-content a:hover {
background-color: #CECE99;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.movie-info {
display: inline-block;
width: 510px;
background-color: #A7A774;
color: white;
font-family: 'peninim';
font-size: 15px;
padding: 3px 0;
color: white;
cursor: pointer;
}
.movie-info:hover {
background-color: #CECE99;
color: black;
}
.movie-info:hover .dropbtn {
background-color: #A7A774;
color: white;
}
<div class="dropdown">
<button class="dropbtn">dropdown button</button>
<div class="dropdown-content">
first redirect
second redirect
</div>
</div>
<form target="_blank">
<button class="movie-info" type="submit" title="redirect" formaction="https://ticks.co.il"> formaction button
</button>
</form>
Like mentioned in the comments, you can do this with JS.
First at all you need to add a onmouseover and onmouseout trigger to the dropdown box.
Then you add a JS that will call the class and change its color and background-color like shown in the snippet:
function hoverTrue() {
document.querySelector('.dropbtn').style.backgroundColor = "#A7A774";
document.querySelector('.dropbtn').style.color = "white";
}
function hoverFalse() {
document.querySelector('.dropbtn').style.backgroundColor = "#CECE99";
document.querySelector('.dropbtn').style.color = "black";
}
.dropbtn {
width: 210px;
background-color: #CECE99;
color: black;
font-family: 'peninim';
font-size: 15px;
padding: 3px 0;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #A7A774;
color: white;
min-width: 210px;
z-index: 1;
font-family: peninim;
}
.dropdown-content:hover a {
display: block;
}
.dropdown-content a {
color: white;
padding: 3px 12px;
text-decoration: none;
display: block;
font-size: 15px;
text-align: center;
border-top: 2px solid #767676;
border-right: 2px solid #212121;
border-bottom: 2px solid #212121;
border-left: 2px solid #767676;
}
.dropdown-content a:hover {
background-color: #CECE99;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.movie-info {
display: inline-block;
width: 510px;
background-color: #A7A774;
color: white;
font-family: 'peninim';
font-size: 15px;
padding: 3px 0;
color: white;
cursor: pointer;
}
.movie-info:hover {
background-color: #CECE99;
color: black;
}
.movie-info:hover .dropbtn {
background-color: #A7A774;
color: white;
}
<div class="dropdown">
<button class="dropbtn">dropdown button</button>
<div class="dropdown-content">
first redirect
second redirect
</div>
</div>
<form target="_blank">
<button class="movie-info" onmouseover="hoverTrue()" onmouseout="hoverFalse()" type="submit" title="redirect" formaction="https://ticks.co.il"> formaction button
</button>
</form>
Edit for your comment:
like I said, you need to add the onmouseover and onmouseout trigger. Then you give it a function name functionname() of your choice followed with bracket open and close.
the javascript needs a function in this formatting:
function functionname() {
changes
}
for the changes you either can adress an ID document.getElementByID('ID') or a class document.querySelector('.class'). Alternativly youc an use a pre-defined variable.
after that you add a .style and a inline style attribute you want to change like color. so the entire line should like this:
document.querySelector('.class').style.color = "red";
If you got all changes you want, you need to close the function with ;} . Multiple chanegs can be added after a , or ;
Related
I have a problem.
I have an animated navigation bar on my html website, so that if you scroll it'll change. But I want that if I'm hovering on the changed navbar, it'll change back to his normal state. But that doesn't work at all. I hope you guys can help me.
Code here:
window.addEventListener("scroll", function(){
var header = document.querySelector(".navbar");
header.classList.toggle("sticky", window.scrollY > 0);
});
let navbar = document.querySelector(".sticky");
navbar.addEventListener("mouseover", function( event ){
navbar.classList.toggle("navbar", navbar.onmouseover);}
, false);
body{
margin: 0 0 0 0;
padding: 0;
}
.head {
display: inline-block;
position: absolute;
margin: 0;
background-image: url('pictures/head.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0;
text-align: center;
height: 500px;
width: 100%;
}
.head h1 {
color: white;
text-align: center;
padding: 100px 100px 25px;
font-family: Copperplate, Monaco, "Lucida Console", monospace;
font-size: 50px;
}
.head h2 {
font-family: Copperplate, Monaco, "Lucida Console", monospace;
font-size: 30px;
color: white;
}
.navbar .dropbtn {
background-color: white;
color: black;
padding: 16px 16px 14px 16px;
font-size: 20px;
border: none;
cursor: pointer;
border-left: none;
border-right: 1px solid grey;
color: black;
transition: 0.6s;
}
.sticky .dropbtn {
background: none;
color: black;
padding: 16px 16px 14px 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-left: none;
border-right: 1px solid grey;
color: white;
transition: 0.6s;
}
.navbar {
z-index: 1;
overflow: visible;
background-color: white;
position: fixed;
top: 0;
width: 100%;
float: left;
transition: 0.6s;
.navbar .dropdownlinks {
float: left;
}
}
.dropdown {
position: relative;
display: inline-block;
margin: -2px;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
background-color: white;
z-index: 1;
box-shadow: 0px 8px 16px 0px black;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
border-bottom: 1px solid black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: red;
color: white;
}
.navbar img {
width: 50px;
height: 50px;
border-right: 1px solid grey;
padding-right: 4px;
top: 0;
float: left;
}
.dropdown-content a:hover {
color: white;
background-color: red;
}
.sticky {
background: none;
transition: 0.6s;
}
<header>
<div class="navbar">
<img src="pictures/gear_icon.png" alt="icon">
<div class="dropdownlinks">
<div class="dropdown">
<button class="dropbtn">F1 history</button>
<div class="dropdown-content">
All the teams
All world champions
</div>
</div>
<div class="dropdown">
<button class="dropbtn">News and times</button>
<div class="dropdown-content">
Driver and team news
Liveblog
Calender
Archives
</div>
</div>
<div class="dropdown">
<button class="dropbtn">This season</button>
<div class="dropdown-content">
Driver's standings
Constructor's standings
All current drivers
All current teams
</div>
</div>
</div>
</div>
</header>
It's a formula 1 website btw, so if you love formula 1 please help me:)
I found good split dropmenu button script.
Created multiple buttons, and problem is if I click one button then all dropmenus of other buttons open...
So what I want to accomplish is only to open dropmenu that i've clicked not all menus (10post per page so i have 10buttons) that are on page.
Guess I need some id recognition code in my .js.
my script:
$(function() {
var splitBtn = $(".x-split-button");
$("button.x-button-drop").on("click", function() {
if (!splitBtn.hasClass("open"))
splitBtn.addClass("open");
});
$(".x-split-button").click(function(event) {
event.stopPropagation();
});
$("html").on("click", function() {
if (splitBtn.hasClass("open"))
splitBtn.removeClass("open");
});
});
.x-split-button {
position: relative;
display: inline-block;
text-align: left;
margin-top: 20px;
}
.x-button {
position: relative;
margin: 0;
height: 30px;
float: left;
outline: none;
font-weight: 600;
line-height: 27px;
background: #F2F2F2;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button:hover {
cursor: pointer;
background: #E0E0E0;
}
.x-button:active {
background: #D3D3D3;
}
.x-button.x-button-drop {
border-left: 0;
height: 30px;
}
.open > .x-button-drop-menu {
display: block;
}
.x-button-drop-menu {
position: absolute;
top: 27px;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #F2F2F2;
color: #000000;
background-clip: padding-box;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button-drop-menu li a {
display: block;
padding: 3px 20px;
clear: both;
font-family: arial;
color: #000000;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center><font color="green">1st forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
<br/><br/><br/><br/><br/><font color="green">2nd forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
</center>
jQuery $(this) is concerned about the element concerned in this function (Onclick). We use closest() to reach The parent container (.x-split-button) which is the targeted element in this case.
We can also use $(this).parent(".x-split-button").addClass("open");
In other situations, you could use $(this).parents(); when the container is not a direct parent.
$(function() {
var splitBtn = $(".x-split-button");
$("button.x-button-drop").on("click", function() {
if (!($(this).closest(".x-split-button").hasClass("open"))){
splitBtn.removeClass("open");
$(this).closest(".x-split-button").addClass("open");
}else{
$(this).closest(".x-split-button").removeClass("open");
}});
$(".x-split-button").click(function(event) {
event.stopPropagation();
});
$("body").on("click", function() {
if (splitBtn.hasClass("open"))
splitBtn.removeClass("open");
});
});
.x-split-button {
position: relative;
display: inline-block;
text-align: left;
margin-top: 20px;
}
.x-button {
position: relative;
margin: 0;
height: 30px;
float: left;
outline: none;
font-weight: 600;
line-height: 27px;
background: #F2F2F2;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button:hover {
cursor: pointer;
background: #E0E0E0;
}
.x-button:active {
background: #D3D3D3;
}
.x-button.x-button-drop {
border-left: 0;
height: 30px;
}
.open > .x-button-drop-menu {
display: block;
}
.x-button-drop-menu {
position: absolute;
top: 27px;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #F2F2F2;
color: #000000;
background-clip: padding-box;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button-drop-menu li a {
display: block;
padding: 3px 20px;
clear: both;
font-family: arial;
color: #000000;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center><font color="green">1st forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
<br/><br/><br/><br/><br/><font color="green">2nd forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
</center>
I have two examples of the same element side by side. I need to be able to toggle a class on only one at a time.
With my current Javascript they are both getting toggled at the same time.
This is part a style guide that backend developers use to build out the front end so I cant have extraneous classes that are only for the javascript.
This example is only for the style guide it works in the real application using groovy/grails.
Any tips are greatly appreciated!
$('.toggle-button-wrapper').on('click', function(e) {
$('.toggle-button').toggleClass("toggle-button-selected");
e.preventDefault();
});
.toggle-button-wrapper {
display: flex;
}
.toggle-btn-dark .toggle-button-wrapper {
margin-bottom: 0;
margin-right: 1rem;
}
.toggle-btn-dark .toggle-button {
display: inline-block;
text-decoration: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 3.6rem;
height: 2.4rem;
background-color: #ccc;
color: black;
&:hover {
background-color: darken(#ccc, 5%);
}
}
.toggle-btn-dark .toggle-button .icon {
fill: black;
margin: auto;
}
.toggle-btn-dark .toggle-button-selected {
background: purple;
fill: white;
color: white;
&:hover,
&:active {
cursor: default;
background-color: lighten(purple, 5%);
}
}
.toggle-btn-dark .toggle-button-selected .icon {
fill: white;
}
.toggle-btn-light.toggle-button-wrapper {
margin-bottom: 0;
margin-right: 1rem;
}
.toggle-btn-light .toggle-button {
border: 1px solid #ccc;
display: inline-block;
text-decoration: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 3.6rem;
height: 2.4rem;
background-color: pink;
color: black;
&:hover {
background-color: darken(pink, 5%);
}
}
.toggle-btn-light .toggle-button .icon {
fill: black;
margin: auto;
}
.toggle-btn-light .toggle-button-selected {
background-color: hotpink;
color: white;
&:hover,
&:active {
cursor: default;
background-color: darken(hotpink, 5%);
}
}
.toggle-btn-light .toggle-button-selected .icon {
fill: white;
}
.toggle-button.first{
border-left-style: none;
border-top-left-radius: 1.4rem;
border-bottom-left-radius: 1.4rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.toggle-button.last {
border-top-right-radius: 1.4rem;
border-bottom-right-radius: 1.4rem;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 style="margin-bottom: 10px;">Dark toggle</h4>
<div class="toggle-btn-dark">
<div class="toggle-button-wrapper">
<button class="toggle-button btn-card-mini first toggle-button-selected">
-
</button>
<button class="btn-card-big toggle-button last">
+
</button>
</div>
</div>
<br>
<h4 style="margin-bottom: 10px;">Light toggle</h4>
<div class="toggle-btn-light">
<div class="toggle-button-wrapper">
<button class="toggle-button btn-card-mini toggle-button-selected first" >
-
</button>
<button class="btn-card-big toggle-button last">
+
</button>
</div>
</div>
you could change the selector to
$('.toggle-button-wrapper').on('click', function(e) {
$(this).find('.toggle-button').toggleClass("toggle-button-selected");
e.preventDefault();
});
This basically prevents all toggle buttons from being selected and limits to children of the clicked wrapper
I am new to Angular 6 and Bootstrap ,Here I have a Navigation bar with 3 nav items .
In this I have a nav item named as Store ,When User mouse hover on the Store I need to show a mega menu .mega menu should have the with of the nav bar .
I have tried something but I could not get what I expected .
Stackblitz : https://stackblitz.com/edit/angular-q4p7cc?file=src%2Fstyles.css
can anyone help me to solve this .
try solution
HTML:
<div class="navbar">
<div *ngFor="let cat of category" class="dropdown">
<button class="dropbtn">Link {{cat.catnumber}}
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div *ngFor="let catg of cat.nest" class="column">
<h3>Category {{cat.catnumber}} {{catg.link}} </h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
style.css:
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
background: yello;
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
Noob here. I have these 3 buttons type anchors and I want to change their color when they are clicked. I'm almost there but the thing is when the color changes if you click elsewhere in the page the color goes back to original color.
Here is my code. and I believe to fulfill the requirements javascript will be needed so I'm giving it a javascript tag.
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:active {
background: red;
}
.button:focus {
background: red;
}
Link 1
Link 2
Link 3
add this to ur css
.button:visited{
background: blue;
}
all links clicked will change color
More info here link
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:active {
background: red;
}
.button:focus {
background: red;
}
.button:visited {
background: blue;
}
Link 1
Link 2
Link 3
I think you are looking for this:
https://www.w3schools.com/howto/howto_js_active_element.asp
This will add active class to the button (you can simply change that to your a tags) you clicked on. Even after you will click elsewhere on the screen.
Hope it solved it, and good luck!
Try this js code
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
links[i].onclick = function() {
this.style.backgroundColor = "red";
}
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:active {
background: red;
}
.button:focus {
background: red;
}
Link 1
Link 2
Link 3