CODEWITHSUNDEEP
jqueryhtmlcss
Hedge
Hedge

Reputation: 16748

Non-transparent child of semi-transparent parent element?

I've got a top-navigation which get's semi-transparent when it's not hovered.

nav.top-bar {
  background: none;
  opacity: 0.6;
  transition: opacity 0.4s;
}

nav.top-bar:hover{
  opacity: 1.0;
}

This navigation contains a search-field. It searches live via AJAX and displays the search-results below the search-field.

However it's a child of the top navigation as well which gets semi-transparent when not hovered. Therefore the search-results get semi-transparent too.

enter image description here enter image description here

How can I prevent it from becoming semi-transparent?

EDIT: Applying transparency to background and text-color of the top-navigation won't work because it also contains images.

EDIT2: You can check out the problem on my homepage. Therefore go to http://midifight.club/blog , put something like "ali" in the search. The results will apear. Now drag your mouse somewhere else and drag it again to the search-results. Nothing will happen.

Upvotes: 0

Views: 169

Answers (1)

php_nub_qq
php_nub_qq

Reputation: 16045

Easiest solution that comes to mind is to add a class to the navigation that will prevent it from going transparent when something is searched for.

css

.top-bar.focused { opacity: 1 !important; }

JS

document.getElementById('searchBox').oninput = function(){
    if(this.value){
        document.getElementById('top-bar').classList.add('focused');
    }else{
        document.getElementById('top-bar').classList.remove('focused');
    }
}

Obviously this will not work straight away, I'm just giving you an idea.

EDIT

Firefox' 3d view can be really helpful in times like this

enter image description here

As you can see the search results appear on top of the other content, which means that the bugs are entirely caused by opacity and not z-indexes. You can also get to this conclusion by hovering over the menu and seeing that it appears on top when not faded, if it were a z-index problem then it wouldn't appear on top even when it was non-transparent.

Upvotes: 1

Related Questions