Alfonso Giron Alfonso Giron - 7 months ago 40
HTML Question

jQuery not updating CSS properties

I am having trouble figuring out why the CSS

color
and 'text-decoration' properties are not being applied via the 'menulight' function I have here.

The 'font-weight' and 'font-family' are working fine when I hover over the menu items.

I cut out the rest of the code that the other functions are being applied to just to keep this concise.

Edit: Added the rest of the code



$(function() {
$("#Div1").on("click dblclick", {
name: "Div 1"
}, function(evt) {
updateEventDetails(evt);
evt.stopPropagation();
});
$("#Div2").on("click dblclick", {
name: "Div 2"
}, function(evt) {
updateEventDetails(evt);
evt.stopPropagation();
});
$("#Div3").on("click dblclick", {
name: "Div 3"
}, function(evt) {
updateEventDetails(evt);
evt.stopPropagation();
});
$("div.smallbox").on("mouseenter", function(evt) {
updateEventDetails(evt);
evt.stopPropagation();
});
$("div.smallbox").on("mouseleave", function(evt) {
updateEventDetails(evt);
evt.stopPropagation();
});
$("div.smallbox").on("mousemove", function(evt) {
updateEventDetails(evt);
evt.stopPropagation();
});
$("#input1").keypress(updateEventDetails);
});

function updateEventDetails(evt) {
// clear any current text before we update the value fields
$(".detailLine span[id]").text("");

$("#evtType").text(evt.type);
$("#evtWhich").text(evt.which);
$("#evtTarget").text(evt.target.id);
if (evt.relatedTarget)
$("#evtRelated").text(evt.relatedTarget.tagName);
$("#evtPageX").text(evt.pageX);
$("#evtPageY").text(evt.pageY);
$("#evtClientX").text(evt.clientX);
$("#evtClientY").text(evt.clientY);
$("#evtMetaKey").text(evt.metaKey);
if (evt.data)
$("#evtData").text(evt.data.name);
}

#menu-main-menu a {
color: green;
}

.divhover {
background-color: cornsilk;
}

.divhover .eventDate {
text-decoration: underline;
font-weight: bold;
font-family: times new roman;
color: magenta;
}

.menuhover {
font-weight: bold;
color: magenta;
font-family: cursive;
text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Using the jQuery Event Object</h1>
<p>The jQuery Event object contains detailed information about each event that occurs in the page.</p>
<p>Click on each of the DIV elements below to see event-related information for each.</p>
<div id="Div1" class="smallbox inline">Mouse over and click here (Div1)</div>
<div id="Div2" class="smallbox inline">Mouse over and click here (Div2)</div>
<div id="Div3" class="smallbox inline">Mouse over and click here (Div3)</div>
<div>Type some text here:
<input type="text" id="input1">
</div>
<div id="eventDetails">
<h3>Event Details</h3>
<div class="detailLine">
<span class="lineitem">Event type: </span><span class="lineitem" id="evtType"></span>
<span class="lineitem">Key/Button: </span><span class="lineitem" id="evtWhich"></span>
</div>
<div class="detailLine">
<span class="lineitem">Target: </span><span class="lineitem" id="evtTarget"></span>
<span class="lineitem">Related Target: </span><span class="lineitem" id="evtRelated"></span>
</div>
<div class="detailLine">
<span class="lineitem">pageX: </span><span class="lineitem" id="evtPageX"></span>
<span class="lineitem">pageY: </span><span class="lineitem" id="evtPageY"></span>
</div>
<div class="detailLine">
<span class="lineitem">clientX: </span><span class="lineitem" id="evtClientX"></span>
<span class="lineitem">clientY: </span><span class="lineitem" id="evtClientY"></span>
</div>
<div class="detailLine">
<span class="lineitem">Meta Key: </span><span class="lineitem" id="evtMetaKey"></span>
<span class="lineitem">data: </span><span class="lineitem" id="evtData"></span>
</div>
</div>





jsFiddle: https://jsfiddle.net/azizn/tcw0dc87/

Answer

That is because #menulight a has a higher precedence in CSS than the class selector .menuhover. The fact that font-weight and font-family can be overridden is indicative of this, as these properties were not declared in the selector with the higher preference. You should use #menu-main-menu a.menuhover instead:

    #menu-main-menu a {
        color: green;
    }
    #menu-main-menu a.menuhover  {
        font-weight: bold;
        color:magenta;
        font-family: cursive;
        text-decoration: underline;
    }
Comments