Tips for Choosing Two Classes Using CSS

I'm currently exploring ways to select two classes so that when one of them is hovered over, a specific animation will occur. Here is my latest attempt:

.news1 {
    -webkit-filter: blur(3px);
    filter: blur(3px);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;;

}
.news1:hover .news1msg:hover {
    -webkit-filter: blur(0);
    filter: blur(0);
}
.news1msg {
    -webkit-filter: blur(3px);
    filter: blur(3px);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;;
}
htmlcss

Answer №1

To easily apply the same css to multiple classes or selectors, you can utilize a comma.

.class1,
.class2{
     /* add your styles here */
}

Answer №2

This CSS selector is designed to target any classes that start with 'news', such as news1, news1msg

[class^="news"] {
    -webkit-filter: blur(0);
    filter: blur(0);
}

Edit: Within this snippet, you should find everything necessary for your blur effect.

.news1 {
    background-color:#33aaff;
    width:100px;
    height:100px;
    text-align:center;
    -webkit-filter: blur(3px);
    filter: blur(3px);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;;

}
.news1:hover {
    -webkit-filter: blur(0);
    filter: blur(0);
}
.news1msg {
    color:white;
    font-size:25px;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;;
}
<p class="news1">
  <span class="news1msg">some text</span>
</p>

Answer №3

.article:hover, .message:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

Answer №4

To make use of hover effects, remember to separate selectors with a comma:

.news1:hover,
.news1msg:hover {
    -webkit-filter: blur(0);
    filter: blur(0);
}

Ensure that you position the :hover effect after .news1msg { for it to work correctly

If you want to hover on the parent element and apply blur to a child element:

 .news1:hover .news1msg {
    -webkit-filter: blur(0);
    filter: blur(0);
 }

Remember, you cannot apply CSS to the parent element when hovering on the child

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Click on an element using jQuery to apply a specific class to all other similar

I am looking to dynamically add a class to a DIV after clicking on an A element with the same class. Here is an example: <ul> <li><a href="#1" class="test1">1</a></li> <li><a href="#2" class="test2">2</a>< ...

javascriptjqueryhtmlcss

Leveraging JavaScript for pricing calculations within asp.net framework

I am currently working with a textbox in a gridview and trying to calculate values using JavaScript. My code seems to be error-free. The goal is to multiply the quantity by the rate to get the total price. function totalise(price, rate, qt) { var qt ...

javascripthtmlasp.netgridviewonblur

Is there a way in Material UI to dynamically update the border color of a TextField once the user inputs text?

Is there a way to style the border of a TextField only when it has text input? I am currently using the outlined version of the TextField, which displays placeholder text when empty. <TextField variant="outlined" /> So far, I have managed ...

cssreactjsmaterial-ui

When padding is added on an MVC 5 page, the Bootstrap 4.1.1 class option for rounded-circle becomes distorted

Incorporating VS 2017 and bootstrap 4.1.1 into an MVC 5 page, I am facing a challenge in adding right-side padding to an image without distorting the circular shape of the image, as shown below. When I apply the padding, the circle becomes warped, but remo ...

c#asp.netcssasp.net-mvc-5bootstrap-4

Mix up the colors randomly

After searching extensively, I have been unable to find exactly what I am looking for. The closest matches only cover a portion of my needs which include: I am seeking a randomly selected color scheme that I have created but not yet implemented in code. T ...

javascripthtmlcss

I am having trouble with node.js express not recognizing the path to my CSS files

My objective is to load information onto an HTML page using Node.js and Express. The issue I am facing is that when I try to open the main page (which displays all the books from the database), everything works smoothly - the CSS and JS files are located ...

javascriptcssnode.jsexpresshttp

The CSS menu dropdown fails to function properly on desktop view when there is longer content present

I attempted to merge two different navigation bars, one sticky and the other responsive. The goal was to combine https://www.w3schools.com/howto/howto_js_navbar_sticky.asp with https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp Curr ...

javascripthtmlcss

creating a vertical scroll bar for an HTML table's content

How can I set a fixed height for my HTML table on a webpage so that if it exceeds the height, a vertical scrolling bar is automatically displayed? Any assistance would be greatly appreciated. Thank you. ...

htmlcss

What is the reason for the overflow occurring in a container of identical size due to this particular element?

I've encountered an issue while trying to create a div with a scrollbar that only appears when the elements within it don't fit the default area. <div style="overflow-y: auto; height: 36px;"> <img src="." width="36" height="36" /> ...

htmlcss

Having issues with mouse hover not functioning on button in internet explorer 8?

Currently, I am working with asp.net mvc4 and encountering an issue where the button's color does not change when hovered over. The default blue focus always remains on the button. Can someone assist me in resolving this problem? I am using Internet E ...

htmlcss

Having trouble with the tool tip not showing up correctly in Internet Explorer?

Check out the code snippet below: <table> <tr> <td class="bgimg" valign="middle" width="10%" title="some title" nowrap> <img src="images/SomeLogo.gif"/> </td> </tr> </table ...

html

Employing [style.something.px]="2" in Angular to specify the thickness of the border

Presently, I am setting the width of the element using this code format: <div [style.width.px]="size" [style.height.px]="size"></div> What I am aiming for is to utilize a comparable format but to define the border-width css attribute, such as ...

htmlcssangulartypescript

Clickable table cell with interactive space extending below the text

This adaptation was inspired by the response of James Donnelly to a query about how to create a clickable link in a TD element. While his solution is effective in many cases, I encountered a scenario where it falls short. To illustrate this issue, here is ...

htmlcss

Save property using the useState hook

I am working on implementing a sorting function in the child component, where the props are passed in from the parent through an axios call. Should I: Store the prop in the child component's useState? Pass the parent's setState function as a pro ...

javascripthtmlreactjs

Exploring the wonders of Bootstrap 3 panels and stylish floating images

Is it possible to create a responsive design using Bootstrap 3 panel along with a floating image positioned next to it? I want the panel to seamlessly fit into the available space, without overlapping the image. Can anyone provide guidance on achieving thi ...

htmlcsstwitter-bootstrap-3

Identify modifications in the content within an iframe, where the content is constantly changing due to the use of

Alright, so I have a jQuery mobile enabled page that is being loaded inside an iFrame. Typically, if I want to detect changes in the content of an iFrame, I would use: $('iframe').load(function(){ //content changed! }); However, in this par ...

jqueryhtml

Triggering an automatic pop-up window using JavaScript based on a PHP condition

I have developed a hidden pop-up box that becomes visible when targeted, with its opacity increasing to one. I am aiming for the pop-up to appear if the user is identified as a "firstTimeUser," a status saved in a PHP $_SESSION variable. However, I am stru ...

javascriptphphtmlcss

What steps are required to establish a PHP development and production environment?

I find myself in the position of taking over a small PHP site that relies on a database. While I'm well-versed in C# programming and have experience with databases and web design, I am quite unfamiliar with PHP. My boss wants me to establish both a s ...

phphtmlweb-applicationsdevelopment-environmentphp-5.2

Tips for preventing a React component from scrolling beyond the top of the page

I am looking to achieve a specific behavior with one of my react components when a user scrolls down a page. I want the component to reach the top of the page and stay there without moving any further up. Here is an Imgur link to the 'intranet' ...

javascriptcssreactjsflexbox

What can I do to prevent Masonry from floating all of my grid items to the left?

Is there a way to center justify the masonry grid items? I have noticed that my Masonry layout is aligning all the grid items to the left or justifying them to the left side: <div class="wrap"> <div class="parent grid"> <div class=" ...

jqueryhtmlcssgridmasonry