I am trying to have a button highlight when I hover over it, but it doesn't seem to be working. Am I doing something wrong? It seems to work on the dropdown menu I made, but not the buttons. I am new to html and css and I couldn't seem to find an answer anywhere online.
/*a button that when clicked on, sends to a page about me*/
.SiteMakerButton {
padding : 16px;
width: 15%%;
text-align : left;
background-color: rgb(37, 217, 184);
border: none;
color: white;
font-weight: bold;
font-size: 15px;
}
/*a button that takes you to the main paige*/
.HomeButton {
padding : 16px;
width: 15%%;
text-align: left;
background-color: rgb(37, 217, 184);
border: none;
color: white;
font-weight: bold;
font-size: 15px;
transition-duration: 0.2s;
}
.HomeButton :hover {background-color: white; color: black;}
.SiteMakerButton :hover {background-color: white; color: black;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>TESTING</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class = TopBannerDiv>
<button class = "HomeButton">Home</button>
<button class = "SiteMakerButton">About The Site Maker</button>
<div class = "dropdown">
<button class = "dropbtn">Units</button>
<div class = "dropdown-content">
Unit 1
Unit 2
Unit 3
Unit 4
Unit 5
Unit 6
Unit 7
</div>
</div>
</div>
<script src="script.js"></script>
<script src="https://replit.com/public/js/replit-badge.js"
theme="blue" defer></script>
</body>
</html>
Try writing
.HomeButton:hover {background-color: white; color: black;}
like this, there is a difference in CSS between having spaces and not.
Also, use inspect element to make sure that there is nothing that is overwriting your style.
Reduce the space between the class and the pesudo class (means hover)
.HomeButton:hover {
background-color: white;
color: black;
}
.SiteMakerButton:hover {
background-color: white;
color: black;
}
Related
Novice here.
I'm creating a button however when I upload it onto the webpage it affects every other button by changing the styling to match the new button.
I don't know how to make the styling specific to only that button and have it not affect anything else on the website. Thanks!
<html>
<head>
<style>
a:link,
a:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a:hover,
a:active {
background-color: #810001;
}
</style>
</head>
<body>
Want to explore how to integrate<br>these projects into your classroom?
</body>
</html>
you can make specific id (using #) or class (using dot . can be used multiple times in html dom if you will use button many times)
<html>
<head>
<style>
a#someId:link,
a#someId:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a#someId:hover,
a#someId:active {
background-color: #810001;
}
</style>
</head>
<body>
<a id="someId" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">Want to explore how to integrate<br>these projects into your classroom?</a>
</body>
</html>
You can keep class or id to resolve this issue.
<a id="explore-projects" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10"> </a>
Add CSS to this particular id element.
Check this : http://jsfiddle.net/wzfs238L/
You can define the styling for a class, this snippet uses class name mybutton and shows one with the class added and one without.
<html>
<head>
<style>
a.mybutton:link,
a.mybutton:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a.mybutton:hover,
a.mybutton:active {
background-color: #810001;
}
</style>
</head>
<body>
<h2>With mybutton class</h2>
<a class="mybutton" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">Want to explore how to integrate<br>these projects into your classroom?</a>
<h2>Without mybutton class</h2>
Want to explore how to integrate<br>these projects into your classroom?
</body>
</html>
This is what you use 'classes' or 'ids' for. They help class a type of element for your page or identify a specific one you want to target in CSS. As #Rana suggested, w3schools has a page for this which might be helpful
Use id on your HTML element, and add # on the style. An id must be unique. Further reading about id click here.
<html>
<head>
<style>
a:link,
a:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a:hover,
a:active {
background-color: #810001;
}
#fabulous{
background-color: yellow;
color:maroon;
margin-top:1rem;
}
#fabulous:hover,
#fabulous:active {
background-color: #fcc726;
}
</style>
</head>
<body>
Want to explore how to integrate<br>these projects into your classroom?
<a id="fabulous" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">This one is fabulous</a>
</body>
</html>
This is the code for my HTML page and I'm trying to create a photography site. I was planning to create a website in which when a person hovers over a button on the menu section the background will show the image related to that section, for eg. I've tried for animal button here. But the HTML page is not responsive.
I want the image to be displayed on the whole webpage in the background.
I'm a beginner in Javascript Html and CSS.
Kindly help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our First Photography Site</title>
<script type="text/javascript">
//
function animals()
{
$('#animals').hover(function() {
$(this).attr('src', 'https://www.nationalgeographic.com/animals/2019/10/wildlife-photographer-
of-the-year-2019/#/05-wildlife-awards-audun-rikardsen---wildlife-photographer-of-the-year.jpg');
}, function() {
$(this).attr('src', 'https://www.nationalgeographic.com/animals/2019/10/wildlife-photographer-
of-the-year-2019/#/11-wildlife-awards-max-waugh---wildlife-photographer-of-the-year.jpg');
});
}
//
</script>
</head>
<body>
<nav>
<div class="menu">
<button class="dropbtn">Menu</button>
<div class="menu-content">
Home
Animals
Travel
Food
</div>
</div>
</nav>
<br>
</body>
</html>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.menu {
position: relative;
display: inline-block;
}
.menu-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.menu-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.menu-content a:hover {background-color: #ddd;}
.menu:hover .menu-content {display: block;}
.menu:hover .dropbtn {background-color: #3e8e41;}
</style>
Do you mean like this? When using jQuery, make sure you import the cdn or library to your html, and put all of your jQuery code within a document ready code like so:
$(document).ready(function(){ YOUR CODE HERE });
Another error in your code is that you shouldn't be using the "src" attribute with your jQuery. Remember that "this" is referring to "#animals", which is a link not an image. If you want to change the background image, you would want to change the css property "background-image" instead.
The image urls you were using weren't working so I used some stock images so you can see the code working. Make sure that your urls lead to an image, not a site. Your urls look like they are leading to a site.
In your CSS I also added
background-size: cover;
background-position: center;
transition: 0.3s all ease-in-out;
to all of your links (#animals, #travel and #food). The background-size property determines how your image covers its container. Using "cover" makes it so the image always fills the width of its container, and any excess height is not seen. Background-position determines what part of the image is displayed. By default, it would be the top left. I changed it to center so you can see the focus of the images. The "transition" property is completely optional, it makes it so that the images transition on hover within 0.3s. It just serves to make the background change smoother and not suddenly jump between images.
I don't know if you wanted the image when you are not hovering to show so I specifically declared the initial background image url in the '#animals' css as well. If you don't want it to show an image until after a user hovers, you can remove this line from the CSS. Otherwise, if you want it to show an initial image make sure you declare the background-image for each link separately.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our First Photography Site</title>
<script>
$(document).ready(function(){
$('#animals').hover(
function() {
$(this).css('background-image','url(https://images.unsplash.com/photo-1504208434309-cb69f4fe52b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80)');
},
function() {
$(this).css('background-image','url(https://images.unsplash.com/photo-1501706362039-c06b2d715385?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2035&q=80)');
}
)
})
</script>
</head>
<body>
<nav>
<div class="menu">
<button class="dropbtn">Menu</button>
<div class="menu-content">
Home
Animals
Travel
Food
</div>
</div>
</nav>
<br>
</body>
</html>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.menu {
position: relative;
display: inline-block;
}
.menu-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.menu-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.menu-content a:hover {background-color: #ddd;}
.menu:hover .menu-content {display: block;}
.menu:hover .dropbtn {background-color: #3e8e41;}
#animals, #travel, #food {
background-size: cover;
background-position: center;
transition: 0.3s all ease-in-out;
}
#animals {
background-image:url(https://images.unsplash.com/photo-1501706362039-c06b2d715385?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2035&q=80);
}
</style>
There are several issues with your code :
you declare a function but you never call it
you are using jQuery but I can't see any jquery import
your function is targetting your link and not a section
I suggest you use vanilla javascript and event delegation :
let page = document.querySelector('.page');
let menu = document.querySelector('.menu');
const changeBg = (event) => {
let target = event.target.closest('a');
if (target && target.dataset.image) {
page.style.backgroundImage = `url(${target.dataset.image})`;
}
}
menu.addEventListener('mouseover', event => changeBg(event));
menu.removeEventListener('mouseover', event => changeBg(event));
html,
body,
.container {
height: 100%;
width: 100%;
}
.menu {
position: fixed;
left: 0;
right: 0;
top: 0;
}
.menu ul {
display: flex;
justify-content: space-between;
}
.page {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
}
<div class="container">
<nav class="menu">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</nav>
<section class="page" style="background-image: url('')">
PAGE
</section>
</div>
I am using bootstrap 4 to style my html pages. And i am using font awesome to add social media icons on the webpage too.
<!DOCTYPE html>
<html lang = 'en'>
<head>
<meta charset = 'utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>
Page Title
</title>
<style>
body {background-color: lightcyan}
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.6;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
</style>
</head>
<body>
<div class = 'container'>
<div class = 'row'>
<div class = 'col text-center'>
</div>
</div>
</div>
</body>
</html>
But when i import the bootstrap4 library, the social media icons shape distorts.
<!DOCTYPE html>
<html lang = 'en'>
<head>
<meta charset = 'utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>
Action Page
</title>
<style>
body {background-color: lightcyan}
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.6;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
</style>
</head>
<body>
<div class = 'container'>
<div class = 'row'>
<div class = 'col text-center'>
</div>
</div>
</div>
</body>
</html>
I dont understand what the problem here is.
Can somebody please help me solving this problem...
Thanks in advance ! :)
If you use chrome inspect tools and play around with switching off css and changing the values for display or position etc.. You will see which rule is breaking it. I found changing these fixed it:
.fa-linkedin, .fa-youtube {
display: inline;
}
(hint: in the dev tools it also tells you which css file is causing the changes, i think it was font-awesome here)
In my head I want to use the "Your Image is More Important Than Ours" with an emphasis on More Important.
I also want that to be underlined and shadowed to match a red background (white shadow). That emphasis also I'm debating if it should blink or fade in.
For some reason, my css isn't working on it.
HTML CODE:
<!-- This is a HTML Document-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dld.css">
<title>Dave's Logo Designs</title>
</head>
<header>
<div id="header">
<h1>Your Image is <em>More Important</em> Than Ours</h1>
</div>
</header>
<body>
<h1>Welcome to the official site of Dave's Logo Designs<h1>
</body>
</html>
CSS So Far:
header {
width: 100%;
height: 200px;
}
header:h1 {
color: red;
text-shadow: 0px 2px 2px white;
font-size: 25px;
font-family: impact;
}
header:em {
color: white;
font-weight: bold;
text-decoration: underline;
font-size: 30px;
font-family: impact;
}
Nothing's working. Probably something stupid on my end. Thanks for the help in advance.
You should put header tag inside yout body tag.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dld.css">
<title>Dave's Logo Designs</title>
</head>
<body>
<header>
<div id="header">
<h1>Your Image is <em>More Important</em> Than Ours</h1>
</div>
</header>
<h1>Welcome to the official site of Dave's Logo Designs<h1>
</body>
</html>
and also change your css selector
header {
width: 100%;
height: 200px;
}
header h1 {
color: red;
text-shadow: 0px 2px 2px white;
font-size: 25px;
font-family: impact;
}
header em {
color: white;
font-weight: bold;
text-decoration: underline;
font-size: 30px;
font-family: impact;
}
note the space between header and h1.
It will result like this (darkgreen background added to show italicized text which is white).
Learning CSS and having some problems with the logic of what I'm trying to select. I'm trying to make a global coupon style with two other classes that change the background color and font color. The black style is overriding the white style p fonts and can't understand why.
Thanks for any help, Jacob
Here is the link to the HTML/CSS
Live Coupon HTML Document
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Coupons Snippet</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="coupon white_c">
<h3><span class="coupon_type_big">50%</span> Off CSS!</h3>
<p>Present this coupon at checkout to receive half off your CSS order!</p>
</div>
<div class="coupon black_c">
<h3><span class="coupon_type_big">50%</span> Off CSS!</h3>
<p>Present this coupon at checkout to receive half off your CSS order!</p>
</div>
</body>
</html>
/*Coupon Style Sheet*/
/*Global Coupon*/
.coupon {
width: 250px;
padding: 10px;
text-align: center;
border: 3px dashed #ccc;
}
.coupon h3 {
font: bold 200% Geneva, Arial, Helvetica, sans-serif;
font-size: 1.3em
}
.coupon_type_big {
font-size: 1.8em
}
/*Coupon White*/
.white_c {
background-color: #f2f2f2;
}
.white_c h3,p {
color: #000;
}
/*Coupon Black*/
.black_c {
background-color: #000;
}
.black_c h3,p {
color: #fff;
}
.white_c h3,p {
color: #000;
}
.black_c h3,p {
color: #fff;
}
needs to be:
.white_c h3,
.white_c p {
color: #000;
}
.black_c h3,
.black_c p {
color: #fff;
}
The comma in a CSS selector separates two selectors for which you want to apply the same rules, but each selector in the list is completely independent. So,
.white_c h3,p {
color: #000;
}
specifies that all p elements (as well as all h3 elements that are children of an element with the white_c class) should have black text. Similarly, the rule,
.black_c h3,p {
color: #fff;
}
gives all p elements white text, and since it comes later in the stylesheet, it overrides the previous color declaration for p elements.
I expect that what you are after is this:
.white_c h3, .white_c p {
color: #000;
}
.black_c h3, .black_c p {
color: #fff;
}