Creating a CSS class in a separate file for an element in Angular 4

Looking for some help with my code setup. Here's what I have:

<div class="over"> Content </div>

In my component file, this is what it looks like:

 @Component({
        selector: 'app',
        templateUrl: './app.component.html',
        styleUrls: [
            './css/custom.css'
        ],
    })

Here is my CSS styling:

.over{
        background: #F3F3F3;
        border-radius: 3px;
        border: 1px #cccccc solid !important;
    } 
    .over:hover{
        background: white;
        border-radius: 0px;
        border: 0px #cccccc solid !important;
    }

My folder structure looks like this:

  • app
    • css
      • custom.css
    • app.component.ts
    • app.component.html

I'm having an issue with the hover effect in the CSS. Can anyone spot what might be causing this problem?

Answer №1

It is recommended to utilize absolute paths for your styles, which can be done as follows:

@Component({
    selector: 'app',
    templateUrl: 'app/app.component.html',
    styleUrls: [
        'app/css/custom.css'
    ],
})

An example of a functional app with a similar directory structure can be found here: https://plnkr.co/edit/cGGybOOjgsUqZwEWyaLX?p=preview

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

Utilize the value of one variable to determine access to another variable in Javascript

I am working with several boolean variables and I want to create a new variable that keeps track of the most recently changed boolean variable. This way, every time a new boolean variable is modified, I can toggle the previous one. If you have any ideas o ...

CSS descendant selector add style excluding child elements

My issue involves two divs each containing a table. When I apply the CSS class "table" to the first div, the second table in the div is impacted as well. .tbl-generic th:nth-child(-n+2),td:nth-child(-n+2) { background-color:red; width:25px; } ...

What are some methods for submitting an HTML form to a CSV file?

I've been racking my brain for the past few days trying to find a viable solution to this problem. My project requires 100 individuals to take turns sitting at a computer and filling out a form I created. Each time someone submits their information, ...

The side menu fails to appear when pressed

When using the push method, I am unable to see the side menu. However, it works fine with the setRoot navigation. How can I resolve this issue and display the side menu when using the push method? dashboard.html <ion-col col-9> <ion-searchbar ...

I attempted to unsubscribe from an observable in Angular, but I encountered an error stating that the unsubscribe function does not exist

Here is the code snippet from a components.ts file in an Angular project. I encountered the following error during compilation: ERROR merge/merge.component.ts:75:12 - error TS2551: Property 'unsubscribe' does not exist on type 'Observable& ...

CSS vertical alignment: Getting it just right

I am currently using Bootstrap and below is a snippet of the code I have implemented. <div class="row"> <div class="col-lg-6"><img src="#" alt=""></div> <div class="col-lg-6"> <h2>Heading</h2> ...

What is the best way to wrap text and move the lines up without affecting the bottom margin?

When the text length increases in the first image, it shifts upwards similar to what you see in this image. How can I achieve this effect? The use of "word-wrap" causes the line to break and move to the next line, which is not what I want. In the code sn ...

ZeroClipboard intricate CSS issue

I have a list of images with an option box that appears on mouseover. The box contains an embedded code input field for copying purposes. I recently implemented zeroclipboard to enable the copy function on click. However, when I hover over an image and try ...

What are the steps in creating a responsive UI with CSS?

How can I create a responsive UI using css for the following code snippet? <Text className="w-100 mt-0 align-self-center"> Lorem ipsum Lorem ipsum Lorem ipsum<span>{'$200'}</span> </Text> <Text classNam ...

How can I obtain the width of one element and then use it to adjust the size of another element that is

Currently, I am working on a dropdown menu and facing an issue with setting the submenus to match the width of the top-level page. In my HTML structure (specifically for a WordPress theme), it looks something like this: <ul class="menu"> <li ...

I am struggling to find the right way to center those images

https://i.sstatic.net/aRkvl.jpg Hello everyone, I'm currently attempting to set up the main content of the homepage resembling the image provided, but I'm encountering some challenges. Every approach I take seems to cause the image to overflow ...

Arrange divs in a stack fashion

Currently, I have a table-styled three-column set of divs. I would like these columns to stack vertically on mobile devices. I think this can be achieved using the float method, but the titles and descriptions for each column are in separate rows (divs), ...

The UI-Grid feature in Angular, when set to right-to-left (RTL) mode, incorrectly displays data in the opposite order compared to the

In my _Layout.cshtml file, I have a CSS that sets all UI controls to right-to-left direction using the following code: * { direction: rtl; } Currently, I am working with Angular's UI-Grid, and in RTL Localization, the ...

Issue encountered while attempting to initiate a new project with Angular CLI

Encountering an error while trying to create a new app using Angular CLI Attempted solutions: npm cache clean --force npm cache verify Unfortunately, the above steps did not resolve the issue Please refer to the image linked below https://i.sstatic.ne ...

Tips for creating space between two fluid divs

I'm currently facing an issue with the spacing between two child divs inside a parent div. The web page needs to be responsive for different screen widths, but the vertical space between the left and right divs is not behaving as expected. I am using ...

How can one get rid of a sudden strong beginning?

Recently, I delved into the world of CSS animation and encountered a frustrating issue. I've tried numerous methods and workarounds to achieve a smoothly looping animation without interruptions. Despite my efforts, I have not been able to replicate th ...

Prevent Border Around Images within a Child DIV

Currently, I am in the process of designing a Tumblr theme and facing the challenge of making my pages visually appealing. One particular issue that is causing me trouble is my desire to have images on individual pages bordered in green with a maximum wid ...

When the keyboard appears, the Ionic 2 form smoothly slides upwards

I am currently working with the most recent version of Ionic 2. In my code, I have a <ion-content padding><form></form></ion-content> containing a text input. However, when attempting to enter text on an Android device, the keyboard ...

Angular 2, using Jasmine and Karma for testing, encountered an error with the HTTP testing API, which returned an error message stating: {"isTr

I've set up an http test case for my Angular2 app using Jasmine-Karma and encountered an API error: Uncaught API Error. Scenario: I'm trying to test an http service for my Angular2 App using Karma-Jasmine, and I've implemented the method be ...

Incorporating optional fields into the form builder without being mandatory

For my current project on Ionic 4, I have implemented a form builder to create and validate forms. I have also included the [disabled] attribute in the form to disable it if all fields are not valid. However, I noticed that even if I do not add Validators ...