Highlight Multiple Items on Hover's Condition

Highlight multiple items on hover's condition

I will give a rather simple solution.

Give every boxes classes of price where should be opaque on. Kinda like

<div id="item1" class="p1 p15">Item 1</div>

Then, on your price links use the classname as the id for the specific links

   <a class="price" id="p1">$1+</a>

Then use the

$(".price").mouseover(function() {
           $(".items").css("opacity", 0.4);
           id = $(this).attr('id');
           $("."+id).css("opacity", 1);
});

Demo

Demo 2 Including the styles

Highlighting multiple elements on hover

That is about the best way to do it with jQuery. You can also do a similar effect with CSS and classes applied to parent elements.

For instance:

<div>
    <div class="bob">This is Bob.</div>
</div>

Then add a class to the parent element:

<div class="show-bob">
    <div class="bob">This is Bob.</div>
</div>

Of course, the CSS is key here:

.bob { opacity: 0.75 }
.show-bob .bob { opacity: 1 }

Sure, you need to add some CSS animation properties there for real feature parity, but you get the gist.

Highlight multiple rows in several tables

Here a solution with JQuery https://jsfiddle.net/3cehoh78/5

$(document).ready(function() {

    $( "tr" ).hover(function() {
     var search = $(this).find("td:eq(1)").text();

   $( ".highlight" ).removeClass("highlight");

     $("tr:contains('"+search+"')").addClass("highlight");
  }); /* END HOVER */

}); // end document ready

Hover over a button and highlight multiple controls when condition is met (MVVM)

This is partial, but illustrates how to

1. Expose mouseover state of a possibly disabled control to XAML style triggers on other controls, and

2. How those other XAML triggers can do stuff only when two different conditions are both true.

XAML:

<StackPanel Orientation="Vertical">
    <CheckBox 
        x:Name="EnableButton1CheckBox" 
        Content="Enable Button1" 
        Margin="4"
        />
    <Grid
        Margin="4"
        >
        <Button 
            Content="Button1"
            x:Name="button1"
            IsEnabled="{Binding IsChecked, ElementName=EnableButton1CheckBox}"
            >
        </Button>
        <!-- 
        When button1 is disabled, it can't receive mouse events, so we create a 
        coextensive control that's explicitly transparent. If it merely had no  
        background specified, it wouldn't get mouse events either. 
        -->
        <Border
            x:Name="Button1MouseDetector"
            Background="Transparent"
            >
            <Border.Style>
                <Style TargetType="Border">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Tag" Value="MouseOver" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
        </Border>
    </Grid>

    <Button 
        Content="Button2"
        x:Name="button2"
        Margin="4"
        >
        <Button.Style>
            <Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
                <Style.Triggers>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition 
                                Binding="{Binding Tag, ElementName=Button1MouseDetector}" 
                                Value="MouseOver" 
                                />
                            <Condition 
                                Binding="{Binding IsEnabled, ElementName=button1}" 
                                Value="False" 
                                />
                        </MultiDataTrigger.Conditions>
                        <Setter Property="BorderBrush" Value="Red" />
                    </MultiDataTrigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>
</StackPanel>

CSS: Hover one element, effect for multiple elements?

You don't need JavaScript for this.

Some CSS would do it. Here is an example:

<html>  <style type="text/css">    .section { background:#ccc; }    .layer { background:#ddd; }    .section:hover img { border:2px solid #333; }    .section:hover .layer { border:2px solid #F90; }  </style></head><body>  <div class="section">    <img src="myImage.jpg" />    <div class="layer">Lorem Ipsum</div>  </div></body></html>

How to hover over one item and highlight three more? (beginner)

As far as my understanding you want to illustrate angle relation in parallelogram. Interior angle,exterior angle,vertically opposite angle etc.
I just made to show exterior angles.I hope you could manage to show remaining relations.

So my code below to show alternate exterior angle relations.

 function showExteriorExt1(a,b){  document.getElementById('id'+a+'match').setAttribute('style','background:red');  document.getElementById('id'+b+'match').setAttribute('style','background:aqua'); } function showExteriorExt2(a,b){  document.getElementById('id'+a+'match').setAttribute('style','background:blue');  document.getElementById('id'+b+'match').setAttribute('style','background:yellow'); } function reset(a,b){  document.getElementById('id'+a+'match').removeAttribute('style','background');  document.getElementById('id'+b+'match').removeAttribute('style','background'); }

 /* style of left side */
.item {  width: 100px}
.item a,.fake a {  width: 100px;  height: 40px;  line-height: 40px;  text-align: center;  display: block;  text-decoration: none}
.item a:hover {  color: #fff!important}
#id1 a {  color: red}
#id1 a:hover,#fakeDiv1 a {  background: red}
#id2 a {  color: blue}
#id2 a:hover,#fakeDiv2 a {  background: blue}
#id3 a {  color: green}
#id3 a:hover,#fakeDiv3 a {  background: green}
#id4 a {  color: purple}
#id4 a:hover,#fakeDiv4 a {  background: purple}
#id5 a {  color: deeppink}
#id5 a:hover,#fakeDiv5 a {  background: deeppink}
#id6 a {  color: orange}
#id6 a:hover,#fakeDiv6 a {  background: orange}
#id7 a {  color: yellow}
#id7 a:hover,#fakeDiv7 a {  background: yellow}
#id8 a {  color: aqua}
#id8 a:hover,#fakeDiv8 a {  background: aqua}

/*right side div and links styling*/
#rightDiv {  background-image: url("http://i.imgur.com/C97feff.jpg");  position: absolute;  left: 100px;  top: 0;  height: 320px;  width: 535px}
#rightDiv .region {  background: grey;  opacity: 0.25;  filter: alpha(opacity=25);  position: absolute;  left: 0;  top: 0;  width: 35px;  height: 35px;  cursor: pointer}

/*right side region links positioning*/
#rightDiv a#id1match {  left: 335px;  top: 55px}
#rightDiv a#id2match {  left: 405px;  top: 55px}
#rightDiv a#id3match {  left: 280px;  top: 98px}
#rightDiv a#id4match {  left: 350px;  top: 98px}
#rightDiv a#id5match {  left: 140px;  top: 200px}
#rightDiv a#id6match {  left: 208px;  top: 200px}
#rightDiv a#id7match {  left: 90px;  top: 240px}
#rightDiv a#id8match {  left: 155px;  top: 242px}

/*left link hover right side change*/
#id1:hover ~ #rightDiv a#id1match {  background: red}
#id2:hover ~ #rightDiv a#id2match {  background: blue}
#id3:hover ~ #rightDiv a#id3match {  background: green}
#id4:hover ~ #rightDiv a#id4match {  background: purple}
#id5:hover ~ #rightDiv a#id5match {  background: deeppink}
#id6:hover ~ #rightDiv a#id6match {  background: orange}
#id7:hover ~ #rightDiv a#id7match {  background: yellow}
#id8:hover ~ #rightDiv a#id8match {  background: aqua}

/*right link hover left side change*/
.fake {  position: absolute;  left: -9999px;  top: 0}
.fake a {  color: #fff}
#id1match:hover {  background: red}
#id1match:hover ~ #fakeDiv1 {  left: -100px;  top: 0}
#id1match:hover {  background: red}
#id1match:hover ~ #fakeDiv8 {  left: -100px;  top: 280px;}
#id2match:hover {  background: blue}
#id2match:hover ~ #fakeDiv2 {  left: -100px;  top: 40px}
#id2match:hover {  background: blue}
#id2match:hover ~ #fakeDiv7 {  left: -100px;  top: 240px}
#id3match:hover {  background: green}
#id3match:hover ~ #fakeDiv3 {  left: -100px;  top: 80px}
#id4match:hover {  background: purple}
#id4match:hover ~ #fakeDiv4 {  left: -100px;  top: 120px}
#id5match:hover {  background: deeppink}
#id5match:hover ~ #fakeDiv5 {  left: -100px;  top: 160px}
#id6match:hover {  background: orange}
#id6match:hover ~ #fakeDiv6 {  left: -100px;  top: 200px}
#id7match:hover {  background: yellow}
#id7match:hover ~ #fakeDiv7 {  left: -100px;  top: 240px}
#id7match:hover {  background: yellow}
#id7match:hover ~ #fakeDiv2 {  left: -100px;  top: 40px}
#id8match:hover {  background: aqua}
#id8match:hover ~ #fakeDiv8 {  left: -100px;  top: 280px}
#id8match:hover {  background: aqua}
#id8match:hover ~ #fakeDiv1 {  left: -100px;  top: 0px}

<div id="id1" class="item"><a href="#">Angle 1</a></div><div id="id2" class="item"><a href="#">Angle 2</a></div><div id="id3" class="item"><a href="#">Angle 3</a></div><div id="id4" class="item"><a href="#">Angle 4</a></div><div id="id5" class="item"><a href="#">Angle 5</a></div><div id="id6" class="item"><a href="#">Angle 6</a></div><div id="id7" class="item" ><a href="#">Angle 7</a></div><div id="id8" class="item" ><a href="#">Angle 8</a></div><div id="rightDiv">  <a id="id1match" onmouseover="showExteriorExt1(1,8)" onmouseout="reset(1,8)" class="region"> </a>  <a id="id2match" onmouseover="showExteriorExt2(2,7)" onmouseout="reset(2,7)"class="region"> </a>  <a id="id3match" class="region"> </a>  <a id="id4match" class="region"> </a>  <a id="id5match" class="region"> </a>  <a id="id6match" class="region"> </a>  <a id="id7match" onmouseover="showExteriorExt2(2,7)" onmouseout="reset(2,7)"class="region"> </a>  <a id="id8match" onmouseover="showExteriorExt1(1,8)" onmouseout="reset(1,8)" class="region"> </a>
  <div id="fakeDiv1" class="fake"><a href="#">Angle 1</a></div>  <div id="fakeDiv2" class="fake"><a href="#">Angle 2</a></div>  <div id="fakeDiv3" class="fake"><a href="#">Angle 3</a></div>  <div id="fakeDiv4" class="fake"><a href="#">Angle 4</a></div>  <div id="fakeDiv5" class="fake"><a href="#">Angle 5</a></div>  <div id="fakeDiv6" class="fake"><a href="#">Angle 6</a></div>  <div id="fakeDiv7" class="fake"><a href="#">Angle 7</a></div>  <div id="fakeDiv8" class="fake"><a href="#">Angle 8</a></div></div>

How to affect other elements when one element is hovered

If the cube is directly inside the container:

#container:hover > #cube { background-color: yellow; }

If cube is next to (after containers closing tag) the container:

#container:hover + #cube { background-color: yellow; }

If the cube is somewhere inside the container:

#container:hover #cube { background-color: yellow; }

If the cube is a sibling of the container:

#container:hover ~ #cube { background-color: yellow; }

---

Related Topics