So I am trying to make a dog shelter website, and I was wondering if there was a way to make both the image and the text act as one, without turning it into a table. For example, when I hover over the image the text will change still colour, as if I were hovering over the text. I am very new to HTML so it may be something very simple. Thanks.
<html>
<body>
<style>
a:link {
color: black;
}
a:visited {
color: black;
}
a:hover {
color: #327da8;
}
.name {font-size:20px; font-color:black; font-family:montserrat; text-decoration:none; position:absolute; margin-top: 360px; text-align:left; border-width:1px; border-style:solid; border-color:lightgray; padding: 27.5px; border-radius:0px 0px 15px 15px;
}
a img {
border-radius: 50%;
display: block;
border: none;
}
</style>
<img style="position:absolute; margin-top:60px; margin-left:50px; border-radius:15px 15px 0px 0px;" src="https://i.pinimg.com/originals/2d/6f/8e/2d6f8ef1a4c976ce5e2a9eea5980ec92.jpg" height="300" width="200">
<a class="name" style="margin-left:50px;" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveLana.html">Nala <br><br> Breed: Golden <br> Retriever <br><br> Sex: Female</a>
</html>
</body>
This is the code
Use general sibling selector (~) selects all elements that are next siblings of a specified element.
in your case it should be :
a:hover ~ .name { color: #327da8; }
You can put your image and text into the same div, and give it a class name.
Then apply your CSS on that class as well as class:hover.
Example:
.image_and_text_div{
color: black;
// rest of your css property
}
.image_and_text_div:hover{
color: red // it will change only text color if you hover over the image or the text
// Or you can even directly apply CSS on the text like below
h4{
color; red//
}
}
<div class="image_and_text_div"><img hre="your image url/src" /> <h4>Puppy</h4> </div>"
Related
I'm creating a newsletter in Salesforce Pardot and I want the CTA buttons to change color when you hover over them.
I have 2 different CTA buttons.
For the transparent CTA buttons I'm using this CSS and that's working:
.tr1:hover { background: #F7F36D !important; }
.tr1:hover td { background: transparent; }
.tr2:hover { background: #6BCDDD !important; }
.tr2:hover td { background: transparent; }
Etcetera
But I also have a black CTA button where I want to change the bg color (to #E0A9D5) as well as the font color (to #000000). But somehow I can't seem to get it working :(
This is the HTML code:
<tr class="tr6">
<td align="center" class="em_white" height="36" style="height: 36px; background: rgb(0, 0, 0); padding: 0px 12px; font-family: Helvetica, Arial, sans-serif; font-size: 15px; color: rgb(0, 0, 0); border-style:solid; border-radius: 0px; border-width: 2px; border-color: black;" valign="middle">Lorem ipsum dolor ยป</td>
</tr>
Can anyone help me with the CSS part? Thanks!
In order to use the hover property, you can simply use :hover on any selector. Here is a quick example.
button:hover {
background:yellow;
transform:scale(200%);
}
<button>A button</button>
Now if you want to make another element change when you hover on one element, you can use a code like this:
div:hover ~ span {
background:red;
}
<div id="element1">a div here</div>
<span>span</span>
It's not great practice to have lots of inline style added to your html elements. Therefore, you should strip out the content s of the style="...".
Then instead, choose an appropriate selector, eg the class="em_white" and add style there instead:
.em_white {... Add stripped out style here...}
After that, you can then target the anchor within the tr tag, with something like:
.em_white a {background-color:#f00; color:#000}
.em_white a:hover {background-color:#000; color:#fff}
The added benefit to this is that there is a lot less duplication and also your code will become easier to read. You also only need to make one change to the CSS to effect all elements with that class.
I fixed it by styling both tr6 as em_white. I know this is not the right way to do it, but at least it's working.
.tr6 td { background: #000000; }
.tr6:hover td { background: #E0A9D5; }
.em_white1 a { text-decoration: none; color: #E0A9D5; }
.em_white1:hover a { text-decoration: none; color: #000000; }
How do I get rid of the underline for the image inside the link in SCSS. Could anyone please help?
I created a working example using CodeSandbox
HTML
<p>
<a href="#">
Link
<span>
<img src="imagePath" alt="logo" />
</span>
</a>
</p>
SCSS
a {
text-decoration: none;
&:hover{
border-bottom: 1px solid red
}
}
As yiu can't alter the HTML, this snippet puts the underline on a pseudo element rather than on the actual element. The pseudo element is made to have the same width as the text ('Link') by using that as its content - which is slighly nasty as it means if the text of the Link changes the CSS/SCSS will also have to change.
a {
text-decoration: none;
position: relative;
}
a:hover::before {
content: 'Link';
position: absolute;
top: 0;
left: 0;
width: auto;
height: 100%;
border-bottom: 1px solid red;
z-index: 1;
}
<p>
<a href="#">
Link
<span>
<img src="imagePath" alt="logo" />
</span>
</a>
</p>
Try to put background color on span border-bottom:
body {
font-family: sans-serif;
}
a {
text-decoration: none;
border-bottom: 1px solid transparent;
}
a:hover{
border-bottom: 1px solid red;
}
a:hover span {
border-bottom: 1px solid white;
}
<div id="app">
<p>
<a href="#">
Link
<span>
<img
width="10"
src="https://bitsrc.imgix.net/3b69976526d31a20a1fd238f5a32a704cf437dd6.png"
alt="logo"
/>
</span>
</a>
</p>
</div>
We'll thats tricky and also not the best practices when it comes to frontend buuutt
Since you know the size of the image, you can add a fake border-bottom with the pseudo:after element with width 100% - [width-of-the-element]:
a {
text-decoration: none;
position:relative;
&:before{ // we initialize it before showing to avoid creating elements on interaction
position:absolute;
content:'';
left:0;
bottom:-2px;
border-bottom:1px solid red;
width:calc(100% - 10px - 0.2em); // the image is 10px and the space bar is ~0.2em
display:block;
opacity:0; // just some nice transitioning
transition:all .5s ease;
}
&:hover{
//border-bottom: 1px solid red;
&:before{
opacity:1;
}
}
}
<p>
<a href="#">
Link
<span>
<img
width="10" src="https://bitsrc.imgix.net/3b69976526d31a20a1fd238f5a32a704cf437dd6.png" alt="logo"
/>
</span>
</a>
</p>
Check here a working sample
There's a few different ways to do it but here's one that doesn't change your HTML flow. Since the image is inside the <a> and the border is being applied to the <a>, you can move the img outside the bounds of the <a> with positioning so it doesn't affect the width of the element and thus the border.
a
{
text-decoration: none;
position: relative;
&:hover{
border-bottom: 1px solid red;
}
img
{
position: absolute;
left: 100%;
padding-left: 5px;
padding-top: 3px;
}
}
The left is to push it to the outside of the element on the right side, and the padding-left and padding-top are to put it in roughly the same position it was in your sandbox.
Updated sandbox
An alternative would be to wrap the text inside the <a> in their own element, like a span, and then apply the border just to the span.
I would recommend wrapping your anchor text inside the span and using CSS to underline that. One thing to keep in mind is that border is going to add to the elements height and will cause a "jumping" effect when you add/remove the border. I would go about making sure a border is always present, but "hidden" when it's being hovered over. You can do this by either using "transparent" as a color or match the color with the background hex value.
https://codesandbox.io/s/cocky-rgb-6he0j
<p>
<a href="#">
<span>Link</span>
<img src="imagePath" alt="logo" />
</a>
</p>
body {
font-family: sans-serif;
}
a {
position: relative;
&, &:hover, span {
text-decoration: none;
}
span {
border-bottom: 1px solid transparent;
}
img {
position: absolute;
left: 100%;
padding-left: 5px;
padding-top: 3px;
}
&:hover span {
border-bottom-color: red;
}
}
EDIT: updated code formatting and added missing body styles
I want the blue bits of the buttons to all be the same length as each other so it looks cool in a column instead of all messy
context context context
.button {
border: 0px solid #000000;
background: #70D4C7;
padding: 3.5px 7px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
text-shadow: #70D4C7 0 1px 0;
font-size: 20.5px;
font-family: Fira Sans;
text-decoration: none;
vertical-align: middle;
text-align: center;
color: #000000;
}
<!doctype html>
<html>
<head>
</head>
<body>
<div id="button">
<strong>Homepage</strong>
<br>
<br>
<a href="#" style="color: black" class="button"> <strong>exampleexample</strong>
</a>
<br>
<br>
<strong>example </strong>
</nav>
<p></p>
</div>
</body>
</html>
You can wrap each link in a div:
<div>
<strong>Homepage</strong>
</div>
Remove the <br/> tags. And add the following CSS (notice, I moved the background color from your CSS segment to here):
#button > div {
margin: 10px;
width: 100%;
background: #70D4C7;
}
#button {
width: 40%;
}
NOTE: It is generally considered to be poor coding style to use elements for purposes other than which they were intended. So, for example, buttons should be used as buttons, and links should be used as links. Links should not be styled as buttons. But, if you insist on your current structure, the above modifications will produce the following effect:
Here is a Fiddle Demo
<a> is by default display:inline, so it can not have a width. Just add to the class button :
.button{
width:200px;
display:block;
}
and your problem is solved.
I have a link on my website with borders.HTML:
<p id="hero4">Explore our menu</p>
CSS:
#hero4 {
border:1px solid white;
border-radius:5px;
width:150px;
height:30px;
margin:auto;}
I'd like the entire "box" to turn grey when a user hovers over it, like the "create yours" button on the Starbucks website. Right now, I have:
#hero4 a:hover {
background-color:grey;}
but only the small rectangular area around the text turns grey. How can I change my CSS so the entire area within the border changes color?
Then just set the hover to the #hero4:
#hero4:hover { /*removed a*/
background-color:grey;
}
You can use :hover for any element.
You can move the style from the <p> into the <a> tag, and also set it to display:block;.
#hero4 a {
border: 1px solid blue;
border-radius: 5px;
width: 150px;
height: 30px;
margin: auto;
display: block; /*added*/
text-align: center; /*extra: center text horizontally*/
line-height: 30px; /*extra: center text vertically*/
}
#hero4 a:hover {
background-color: grey;
}
<p id="hero4">Explore our menu</p>
Don't use hover over for anchor tag a, instead use it for the paragraph tag p, as p is the parent for the anchor tag.
Code
#hero4:hover {
background-color: grey;
}
EXAMPLE FIDDLE
I have hyperlinks that i want to change color on Mouse hover to show that they are responsive and get rich user interface but i am not able to achieve this..
Here is the fiddle..
Fiddle
And Here is the HTML...
<div id="footer" class="footer-shadow">
<div style="margin-left:auto; margin-right:auto; width:960px; ">
<div id="footerAboutUS" style="float:left; width:150px; position:relative; margin-left: 10px; margin-top: 7px;">
<label style="font-size:18px; color: #6c3f00;">About US</label>
<br/> Our Delivery Model
<br/> Solution Area
<br/> List of Industries
<br/> IT Management
<br/> Lines of Business
</div>
</div>
try to remove the a lement style attribute that overriding your css
then then use tag as below
<style>
a {
color: gray;
text-decoration: none;
font-size: 11px;
}
a:hover {
color: red;
}
</style>
You can set a different color on mouse over using 'hover' pseudo class of CSS.
Example:
.footer-shadow a:hover {
color: red;
}
Fiddle: http://jsfiddle.net/z45Xz/1/
Use class in place of style
like :
.class1{
color: gray;
text-decoration:none;
font-size: 11px;
}
and change color on hover like
.class1:hover{
color: blue;
text-decoration:none;
font-size: 11px;
}
First, remove color gray from your a elements (In you html file). Then insert this into your css:
a {
color: gray;
}
a:hover {
color: red;
}
With demo: http://jsfiddle.net/RubberPoint/d9n79/
First, Don't use inline style for <a> tag as color: gray;. because if you use inline style ,you can't override the another style (internal,external).
a{
color: gray; //you can add your more style here
}
and for mouse change over use this.
a:hover{
color: blue; //you can add your more style here
}
Otherwise, use some ID or class for html element to avoid generic changes for all <a> tag
Just add :hover selector and add !important rule to override the current style
Check this link: http://jsfiddle.net/z45Xz/4/
.footer-shadow a:hover{
color: red !important;
}
First thing as mentioned in above answers Don't use inline style.
And just
a{
color:grey;
text-decoration:none;
}
and for changing the color when u hover the mouse use psedo class "hover" like
a:hover
{
color:green;
}