Highlight Div1 and Div2 on Div2 Mousover, Highlight Nothing on Div1 Mouseover

highlight div1 and div2 on div2 mousover, highlight nothing on div1 mouseover

I changed up your CSS a little bit. Basically to make it bigger.

The order is important here.

This is not perfect due to the outer div's border.

<style>
div {
    border:1px dotted black;
    font-family:Courier;
    background:white;
}

div#top, div#bottom {
    height: 200px;
    width: 200px;
}

div#outer:hover #bottom:hover {
    background:blueviolet;
}

div#outer:hover #top {
    background:green;
}

div#outer #top:hover{
    background:white;
}

div#outer{
    display:inline-block;
    border:2px solid red;
}
</style>

Function not invoking and changing background color on mouseover

You are not correctly targeting the <div> elements in your querySelectorAll. Also, querySelectorAll returns a NodeList object that consists of all the div elements that you queried so you have to loop through each element in the NodeList using a method like forEach() and then apply the style to each element.

---

Check and run the following Code Snippet for a practical example of the above approach:

let container = document.getElementById("container");
let createGrid = (row, col) => {  for(let i = 0; i < (row * col); i++) {    let cell = document.createElement("div");    cell.className = ("cell");    container.appendChild(cell);  }}createGrid(100, 60);
let cells = document.querySelectorAll('#container div');let functionality = () => cells.forEach(e => e.addEventListener('mouseover', (e) => {  e.target.style.backgroundColor = "red";}));functionality();

.cell {padding: 5px;}

<div id="container"></div>

Div1 covers Div2: how to check if the mouse is over the covered Div2?

if you want to check if your mouse is over a <div> that is covered by another <div>, you can achieve this by declaring this code: pointer-events: none; to the css of the covering <div>.

For example:

<div id="under"></div>
<div id="over"></div>

Add this to your css file:

#over{ pointer-events: none; }

In that case, all pointer events for the div having the id=over will be ignored. You can now then add this code to test if its working.

Add this JavaSCript code:

$('#under').mouseover(function() {
    alert("Mouse is over the div having the id='under'");
});

Give it a try! Good luck!

How to write conditional css?

Here I used the sibling selector ~.

div {  height: 30px;}.div1 {  background: red;}.div2 {  background: blue;}.div1:hover ~ .div2 {  background: yellow;}

<div class='div1'></div><div class='div2'></div>

Make div selected instead of text in it

window.getSelection().anchorNode returns the DOM node in which the user selection begins, and its .focusNode returns the node where the selection ends; highlight everything from A to B (bearing in mind that the focusNode may be before the anchorNode...)

Or you can be lazy and just test Selection.containsNode() on every line, as I did here:

$(window).on('mousedown mouseup mousemove', function() {  var sel = window.getSelection();  if (sel.isCollapsed) {    // nothing is selected, remove any existing highlights    $('.line').removeClass('highlight');  } else {    $('.line').each(function() {      $(this).toggleClass('highlight', sel.containsNode(this, true));      // the second param of containsNode causes partially-selected nodes to be included    });  }});

.highlight {  background-color: #2C86FF;  color: #FFF;}::selection {  background-color: transparent;}::-moz-selection {  background-color: transparent}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="line">lorem ipsum dolor sit amet 1</div><div class="line">lorem ipsum dolor sit amet 2</div><div class="line">lorem ipsum dolor sit amet 3</div><div class="line">lorem ipsum dolor sit amet 4</div><div class="line">lorem ipsum dolor sit amet 5</div><div class="line">lorem ipsum dolor sit amet 6</div>

Displaying data one per record in jquery or javascript

If I understand correctly, you need a mechanism to allow a hover handler displayData() to know whether or not a .rightcontainer for the hovered element has been created previously.

The simplest way to do this is to exploit jQuery's .data() to keep a reference to each .rightcontainer as it is created. Thus, there's something to test next time round.

I have had a good hack at all the code to knock it into better shape, though there's no guarantee I've not introduced errors.

function displayData(e) {
    var mapMarkers = $('#mapContainer .e-mapMarker').get(),
        $tooltipDiv = $('#map_tooltip'),
        grandParent = e.target.parentNode.parentNode,
        flsSite = flsSites[mapMarkers.indexOf(grandParent)],
        $searchcontainer = $('#searchcontainer');

    if(!flsSite) return; // probably?

    // Create tooltip if it doesn't already exist.
    if ($tooltipdiv.length === 0) {
        $tooltipdiv = $('<div id="map_tooltip">' +
            '<div id="infocontainer">' +
            '<div class="p-image"><img src="src/images/retrofit.png"/></div>' +
            '<div class="popupdetail">' +
            '<div class="p-name site"> Site Name: <span></span></div>' +
            '<div class="p-name status"> Site Status: <span></span></div>' +
            '<div class="p-name country"> Country: <span></span></div>' +
            '</div></div></div>').css({
            'display': 'block',
            'position': 'absolute',
            'z-index': '13000',
            'padding': '5px',
            'border': '1px solid #707070',
            'cursor': 'default',
            'pointer-events': 'none',
            'font-family': 'Segoe UI',
            'font-size': '12px',
            'color': '#707070',
            'background-color': '#FFFFFF'
        }).appendTo(document.body);
    }

    // Surely, the code below needs to be executed whether the tooltipdiv is freshly created or not, therefore shouldn't be in an else block. 
    $tooltipdiv.find('.site span').text(flsSite.site_name).end()
        .find('.status span').text(flsSite.status).end()
        .find('.country span').text(flsSite.country_name).end()
        .css({ 'left': e.pageX + 5, 'top': e.pageY + 5 })
        .show('slow');

    // If a previously created rightcontainer doesn't exist, then create one and keep a reference to it.
    if(!$(this).data('rightCont')) {
        $(this).data('rightCont', $('<div class="rightcontainer">' +
        '<img id="productimage" src="src/images/retrofit.png"/>' +
        '<div id="imagedetail">' +
        '<span class="details">Product Type</span>' +
        '<span class="details">Version / Size</span>' +
        '<span class="details">Estimated annual Spend</span>' +
        '<span class="details">Site name / manufacturer</span>' +
        '<span class="details">Selling Sales Eng</span>' +
        '</div></div>').on('click', DisplayProfileCard).appendTo($searchcontainer));
    }

    // Unhighlight all rightcontainers and highlight the current one, whether it was made earlier or just now.
    $searchcontainer.find('.rightcontainer').removeClass('background');
    $(this).data('rightCont').addClass('background');
}

tested only for parse errors

---

Related Topics