Footer link not working properly when being hovered - html

Hi there I have a rather strange problem going on here with one social media link in the footer section of a website. I have applied a simple :hover rule with a specified colour slap, when the element is being hovered. Well so far so good, but the link doesn't change its colour when being hovered. I even put !important rule (which I very well know that isn't a good practise at all) and still no improvement. When opened in DevTools and applied the hover checkbox somehow the rule applies and the icon gets changed. My question is why is this happening, and is this problem coming from the nested tags, because I clearly see that the new CSS rule is there and should be working? The theme is quite outdated and old-fashioned, and is working on Wordpress.

Add the following code
.vc_icon_element.vc_icon_element-outer .vc_icon_element-inner.vc_icon_element-size-sm .vc_icon_element-icon:hover, html .vc_icon_element.vc_icon_element-outer .vc_icon_element-inner:hover > span {
color: #07918A !important;
}
Problem: you hovered the < a > and gave it a hover class but the icon < span > was not affected by it. My code should fix this.

Related

How can i affect another div when i hover on link of another one?

So, i made a website using Wordpress and elementor, I would like to change the image on the right when you hover on the label 'Carrello'. Basically when I hover on different drop-down menu labels, the ima should change accordingly on which link I'm hovering. That's the link of the website (don't look at anything else, I'm just doing some practice on Mega Menu).
That's my code (in this example I've just used display:none just to see if I can affect the other div but the goal should be change it) :
.megamenu22 .elementor-nav-menu li:nth-child(2):hover ~ .elementor-element-d0f1e73 img {display:none !important}
Thank you!
https://www.archless.it/

How to change the link color in specific area using css

I've taken a look at many questions that I thought were a problem similar to mine but none of them worked for me which is why I'm posting this. I'm still new to programming (just know the basics) so please bear with me:
I own a website All Gaming Everything
please open any post on the website
The problem I was facing was that all of the <a> elements on the website were grey in color so using the custom CSS option in my wordpress theme, I just did
a:link { color:white; }
Now while this worked like a charm and all of my elements have the same color (white), I want the color of a:link as red on ONLY the body of the article since white prevents the visitor from seeing if there is any link on the post. I tried changing the aspects using inspect element and custom CSS but nothing seems to be working for me. I have access to both custom CSS and custom HTML editors on my wordpress theme so I'd really appreciate any help with this and once again sorry if I talked noobish (I am a noob).
You can use a css selector inherited. That means if you have a container with a <a> element as child for example
<div id="container">
Link
</div>
do in your css
#container a {
color: #ff0000;
}
or
div a {
color: #ff0000;
}
now all <a> in #container got red color, if no other declarations from wp stylesheets exists.
Take a look to some great websites like w3schools.com and get the basics of css selectors, childs, parents and much more.
Since you are using wordpress and the wygiswys wrap text inside <p></p> you can try:
p a:link{color:red};
and it will change the color of each link inside a paragraphe.
I visited your site and noticed all articles are wrapped in a div with a class "td-post-content". This way, all you have to do is create a CSS rule that targets anchor tags only within those divs.
Here:
.td-post-content a {
color: red;
}
It workd like a charm. I tested on the post below which has a link within the article body:
By the way, you don't need to use a:link on your CSS statements. Only a will do it. ;)
Cheers!

How to remove CSS mousedown effects

I have this problem in Safari and Chrome but not in IE.
When I click a button the mousedown event triggers some kind of CSS rule which makes it slightly wider.
Because of this it drops down onto the next row and the click event is not triggered.
It stays on the next row until the mouse button is released.
I'm working on a large existing site and it's difficult to isolate all the CSS, but I think this could be due to an effect inherent in the browser(s).
Is there a CSS way to stop any effects occuring when the button is clicked?
Thanks for your help.
This is the CSS I have found for :active / :hover.
I don't think this could cause it!
a:hover, a:active
{
text-decoration: none;
}
(The button is an image inside an anchor)
Open your page with Chrome. Right click on the element and select inspect element. On the right handside corner of the inspect element handler, you will see few icons.
Click on the middle one(Which is having a arrow. When you hover it a label will display as "Toggle element State").
Change the element state to active (and to focus if it didn't change anything), and now you will be able to see what css rules are used to apply those changes to your button(It can be a padding or width).
Since now you know what the rule is, you can undo it using another rule (Or using javascript). It's hard to say how to remove the effects without knowing what the effects are.
you can declare a class in css name it for exemple abortmousedowncss :
.abortmousedowncss{
width:yourwidth; !important /* this dont allow any css to overide it ;)*/
}
and you can apply it after with jquery like this :
$('#yourbutton').addClass("abortmousedowncss");

css element dissapears behind padding border

I need your help.
The Title in the green Box "News" appears right under this Link.
http://www.mjart.ch/category/news/
But because of this weird Template I'm using, there are sometimes some imperfections. On this Site here
http://www.mjart.ch/portfolio/
the Green title seems to disappear behind the padding border. I really don't know why.
What I found out is that there are 2 different CSS styles. The first one that works is a .blog-title and the second one is a .single-title. But both are same styled. I would be happy about some help.
Hi if you dont want to change the structure of the template you can add this css rules
.page-id-21 .single-page{
margin:0;
}
.page-id-21 .single-page .single-content{
margin-left: 25px;
}
I added a .page-id-21 class, otherwise in the contact page you will add a margin.
This can be a solution, another is to search the correct template page, if it's a premium plugin it will have it, and you dont need to add the css rules.

Cannot find where this color is declared at

I have inherited a wordpress site using a theme. There is a background color on hover in the portfolio section of the site that we want changed. I cannot find where this color is declared at so I can change it. I thought it was an element called gallerySelectorList but nothing I did changed the color. The demo site of this theme is here : http://demo.pixelentity.com/?surreal
If anyone can help me that would be great I am losing my mind trying to track this thing down and change it. I posted on the creator of the theme's forum but got no where.
Within the Chrome Developer Tools you can invoke the :hover state of any element. In this case, you want to do so for the li wrapping the link. When do we do this, we see the color is set here:
.gallerySelectorList li:hover {
background: #83103e;
}
This code is located within your HTML file:
It looks like it's not actually a hover, but more so being faded in background color. Found then pink color in the class thumbTextWrap.
.thumbImage .thumbTextWrap { background:#8b133c; }
When I changed that or removed it changed the background hover color as needed in the dev tools.