css - Add classes to adjacent elements dynamically on mouseenter -


I am creating a grid of elements and using the CSS transition for each element, hover effect in place. I would also like to add secondary effects on adjacent X- and Y-axis elements, which would cause cloud effect. I think I am referring to those elements by using jQuery's next () and prev () methods, or $ index and $ parent $ $ index.

The grid area will be enough to prevent line-wrapping (using negative margins and hidden overflow).

This is a simple example of my repeat: 

  & lt; Div class = "activity-thumb-line" ng-repeat = "INNERRA in (20) $ track by index" & gt; & Lt; Div class = "activity-thumb" ng-square = "{adjacent}: adjacent}" ng-repeat = "jam in namarra (30) $ index" ng-mouseenter = "highlights activitivity ()" & gt; & Lt; / Div & gt; & Lt; / Div & gt;

and a function in the controller (which I know may not be the best way): 

  $ scope.highlightActivities = function () { $ (This) .next () Adjacent = true; $ (This) .prev () Adjacent = true;

How can I target elements around the hovered element using ng-class (or something) ng-repetitive?

    • Div>

    Here is an instruction that can be used by all indices of adjacent cells Calculates and adds adjacent squares using only jQuery ... not a ng-square

    It assumes that the rows will wrap, adjustments for individual line elements will be required 

     . Directive ('activity call', function) (return {restricted: 'c', link: function (scope, amm) {elem.bind ('mouseenter', function (e) {var elW = elem.width (), $ parent = Elem.parent (), parentW = $ parent.width (), $ items = $ parent.children (), num_tems = $ items.length itemsPerRow = Math.floor (parentW / elW), idx = elem.index () , RowIndex = idx% item pyorove; / * object of various indices, * / var sitenside id x = {top: idx> item idx - itemsPerRow: wrong, right: rowIndex! = ItemsPerRow? Idx + 1: wrong, left : Line indexx; 0? Idx - 1: wrong, bottom: (numItems - idx)> item IDX + Items Parow: False] Console der (adjacent IDX); $ Items.removeClass ('adjacent') $ .each (adjacentIdx, work (status, index) {if (index! == false) {$ items.eq ( Index) .addClass ('adjacent');}});});}}});

    This will not take much overuse to remove jQuery dependency.

    In addition to this, additional instructions will be required to remove additional classes of the mouse when the mouse leaves the main parent one by


    Comments

    Post a Comment

    Popular posts from this blog

    python - Overriding the save method in Django ModelForm -

    I'm having trouble overriding a ModelForm save method. I get this error I'm: Exception type: TypeErier Exception Value: Save () found an unexpected keyword argument 'committed' My intentions include a form 3 fields Submit several values ​​for, then create an object for each combination of those areas, and to save each object file models.py class collarsult type (models.Model): id = model. AutoField (db_column = 'icontact_result_code_type_id', primary_key = true) callResult = models.ForeignKey ( 'CallResult', db_column = 'icontact_result_code_id') campaign = models.ForeignKey ( 'campaign', db_column = 'icampaign_id') CALLTYPE = models.ForeignKey ( 'CALLTYPE', db_column = 'icall_type_id') agent = models.BooleanField (db_column = 'bagent', default = true) teamLeader = models.BooleanField (db_column = 'bTeamLeader', default = true) active = models.BooleanField (db_column = Django.form...
    Read more

    html - CSS autoheight, but fit content to height of div -

    I have a div in which there are three children- div in the left and middle div: float: left while true: float: true because it is my layout Actually will spoil, I've used ClearFix Hack: .cf {zoom: 1; }. Cf: First,. Cf: {content: ""; Display: Table; }. Cf: After {clear: both; } It still works, but I want to be the right div an indicator. So it should fill 100% of the parent unit of height. How can I complete this? PS is the full code: & Lt; / Div & gt; & Lt; Div class = "mobile_content" & gt; & Lt; H5 & gt; {{Data.titel}} & lt; / H5> & Lt; Table & gt; & Lt; TR & gt; & Lt; Th & gt; Komponist: & lt; / Th & gt; & Lt; TD & gt; {{Data.komponist}} & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Th & gt; Instrument: & lt; / Th & gt; & Lt; TD & gt; {{Data.instrumente}} & lt; / TD & gt; & Lt; / TR & gt;...
    Read more

    qt - How to prevent QAudioInput from automatically boosting the master volume to 100%? -

    I have been trying to use Qt5 multimedia to record audio with QAudioInput, however, when I see If QAudioInput is started, it increases the master volume of my sound device to 100%. How can I prevent QAudioInput from changing the master volume? My current development platform is Linux with PalsAdio (with flat audio disabled). How can I use QAudioInput : QAudioDeviceInfo device_info = QAudioDeviceInfo :: defaultInputDevice (); QAudio format format; Format.setSampleRate (44100); Format.setChannelCount (1); Format.setSampleSize (16); Format.setCodec ("Audio / PCM"); Format.setSampleType (QAudioFormat :: SignedInt); Format.setByteOrder (QAudioFormat :: LittleEndian); Std :: cout & lt; & Lt; Device_info.deviceName (). ToUtf8 (). ConstData () & lt; & Lt; Std :: endl; QAudioInput * default_device = new QAudioInput (device_info, format); QIODevice * default_io_device = default_device-> Start (); a QAudioInput.setVolume () method is not you I ...
    Read more