JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mm-active" style="width: 300px; padding:10px; text-align:center; height: 150px; border:1px solid #ccc; margin-bottom:10px; cursor:pointer;"><b>mm-active</b></div>

<div class="mm-container" style="color:DarkGreen; background:#f1f1f1; width: 300px; text-align:center; padding:10px; height: 150px; border:1px solid #ccc; cursor:pointer;"><b>mm-container</b><br><br>By hovering here, the jQuery should look up the new inline style (pink) and ONLY because of that inline style, turn mm-active lime green!</div>

CSS

body {margin:10px;)
    
.activefix {
    background:Lime;
}

JavaScript

// This HAS to be done in these series of steps for my use case
///////////////////////////////////////////////////////////////

// This is just something simple to change the inline style:
jQuery(document).ready(function($){
    $('.mm-container').hover(
         function(){ $(this).css("color","DeepPink") },
         function(){ $(this).css("color","DarkGreen") }
    )
});

// This function gets the value of an inline style property, (Source: bit.ly/1er8vJ2):
(function($) {
    $.fn.inlineStyle = function (prop) {
        return this.prop("style")[$.camelCase(prop)];
    };
}(jQuery));

// Both this function and this condition work, check your console:
if ($(".mm-container").inlineStyle("color") == 'DarkGreen') {
    console.log($(".mm-container").inlineStyle("color")); 
}

// Now how do we assign a class based on what this inline variable changes to?
if ($(".mm-container").inlineStyle("color") == 'DeepPink') {
	$('.mm-active').addClass('activefix'); // This should apply "Lime" to mm-active
}