Question

I have a container div that lights up when you hover over it. It also changes the text effect as well. However, the text effect is only changed if the child div where this text is does not have a text effect itself. Can I somehow overwrite this text effect when the div is hovered, and then return it back when the mouse leaves? Thanks :))))

(Trying to overwrite the text shadow effect in the .text div.)

.maindiv2:hover
{
text-decoration: none;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
    color: #fff;
    background-color: #3C8DDE;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));
    background-image: -moz-linear-gradient(#599bdc, #3072b3);
    background-image: -o-linear-gradient(#599bdc, #3072b3);
    background-image: linear-gradient(#599bdc, #3072b3);
cursor:pointer;
onclick="SomeJavaScriptCode";
}
.text {
    font-family: Arial, Helvetica, sans-serif;
    text-shadow:#ffffff 0px 0.05em  0px;
    font-size: 0.875em;
    font-weight: normal;
    float: left;
    width: 275px;
    text-align: right;
    padding-top: 10px;
    padding-right: 10px;
}

JsFiddle with two divs showing one working and the other not 🙂

Answer 1

I believe

.maindiv2:hover .text
{
    /* whatnot */
}

is an option, but it is not cross browser.

So in your situation you need this:

.maindiv:hover .text
{
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
}

just before the .text csss

Working Demo