Question: Can anyone please work out why the background colour for my text-links appear on my image-links despite my every effort to disable it?

I made a [Fiddle](https://jsfiddle.net/25wqoxn0/)

```
<div class="pink">
  <p>
   The <a href="#" target="blank">link</a>
  </p>
  <a class="imagelink nohover" href="#" target="_blank">
   <img src="http://www.royalcanin.ca/~/media/Royal-Canin-Canada/Product-Categories/cat-adult-landing-hero.ashx" alt="image" style="max-width:476px;max-  height:275px;border:0;">
  </a> 
</div>

```

The CSS

```
.pink {
  background-color: pink;
}

.pink a {
  color: white;
}

.pink img a:hover  {
  background-color: transparent !important;
}

.imagelink:not(.nohover):hover{
  background-color: transparent !important;
}

.pink a:hover {
  text-decoration: none;
  color: white;
  background-color: blue;
}

```

Answer: 
I find the new systemjs.config from angular to be a bit more messy. This is what i use and it works great: 

```
(function(global) {
    var map = {
            'app': 'src/app',
            '@angular': 'node_modules/@angular',
            'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
            'rxjs': 'node_modules/rxjs'
        },
        packages = {
            'app': { main: 'main.js',  defaultExtension: 'js' },
            'angular2-in-memory-web-api': {main: './index.js',defaultExtension:'js'}
            'rxjs': { defaultExtension: 'js' }
        },
        ngPackageNames = [
            'common',
            'compiler',
            'core',
            'http',
            'platform-browser',
            'platform-browser-dynamic',
            'router',
            'forms'
        ],

        tests = [
            'core/testing',
            'common/testing',
            'compiler/testing',
            'platform-browser/testing',
            'platform-browser-dynamic/testing',
            'http/testing',
            'router/testing',
            'forms/testing'
        ];

    function packUmd(pkgName) {packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.min.js', defaultExtension: 'js' }}

    ngPackageNames.forEach(packUmd);

    tests.forEach(function (test) {
        return packages['@angular/'+ test] = { main: '/bundles/' + test.replace(/\//, '-') + '.umd.min.js', defaultExtension: 'js' }
    })

    var config = {
        map: map,
        packages: packages
    };

    System.config(config);

})(this);

```

I think this looks much cleaner and understandable. The only thing you need to change if your app folder changes is: `'app': 'path-to-app/app'`
To load modules in `NodeJS`, install `SystemJS` with:

`npm install systemjs`

If transpiling ES modules, install the transpiler plugin following the instructions from the transpiler project page.